suchen
HeimWeb-FrontendCSS-TutorialMehrere häufig verwendete klassische CSS-Techniken_Erfahrungsaustausch

Verwenden Sie line-height für die vertikale Zentrierung

line-height:24px
Wenn Sie einen Container mit fester Breite verwenden und eine Zeile vertikal zentriert werden muss, verwenden Sie line-height (die Höhe ist die (identisch mit dem übergeordneten Layer-Container), eine weitere Zusammenfassung der vertikalen Zentrierung ist hier zu sehen.

Container-Floats löschen

#main {
overflow:hidden;}
Dieses Problem wurde bereits erwähnt. Weitere Informationen finden Sie hier.

Links nicht umbrechen lassen

a {
white-space:nowrap;
}
Die oben genannten Einstellungen können das Umbrechen von Links verhindern, ich persönlich empfehle jedoch lange Der Link enthält die entsprechende Zeile (eine Erläuterung zu Zeilenumbrüchen finden Sie im Datensatz in der Mitte des Kreises).

Firefox immer Bildlaufleisten anzeigen lassen

html {
overflow:-moz-scrollbars-vertical;
}
Weitere private CSS-Eigenschaften von Mozilla/Firefox finden Sie hier bis hierher. Für die browserübergreifende Unterstützung können Sie auch

body, html {
min-height:101%;
}
verwenden, um das Blockelement horizontal zu zentrieren

margin : 0 auto;
Tatsächlich ist es

margin-left: auto;
margin-right: auto;
Grundsätzlich wird diese Technik in allen CSS-Lehrbüchern erklärt Fügen Sie die Breite hinzu. Sie können auch

body{
text-align: center
verwenden und dann den inneren Container

text-align: left; .

Bildlaufleiste des Explorer-Textbereichs ausblenden

textarea {
overflow:auto;
}
Explorer-Textbereich verfügt standardmäßig über eine vertikale Bildlaufleiste (fragen Sie mich nicht warum). ).

Seitenumbruch beim Drucken festlegen

h2 {
page-break-before:always;
} Das Attribut
page-break-before kann beim Drucken von Webseiten Seitenumbrüche festlegen.

Entfernen Sie das gepunktete Kästchen auf dem Link

a:active, a:focus {
outline:none;}
Firefox konzentriert sich standardmäßig auf den Link ( oder klicken Sie auf ), fügen Sie einen gepunkteten Rahmen hinzu, der mit den oben genannten Eigenschaften gelöscht werden kann.

Der einfachste CSS-Reset

* {
margin: 0; padding: 0
}
Wenn Sie „komplex“ sein möchten, lesen Sie den Ansatz von YUI (auch Hier). Einige Benutzer äußerten auch ihre Ansichten in der ursprünglichen Nachricht

Ich muss Niall Doherty zustimmen, * {margin: 0px; padding: 0px;}
bedeutet im Grunde „Jedes CSS-Element durchqueren und ihm diese geben
Attribute". Das ist eine sehr unnötige Belastung für den Server und
eine schlechte semantische Praxis, da man einigen Elementen erneut
Padding/Rand geben muss, nachdem man sie entfernt hat.

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Flexible captioned geschmückte BilderFlexible captioned geschmückte BilderApr 12, 2025 am 09:31 AM

Das Endergebnis von Eric Meyers Tutorial zum Erstellen dieser Zeile schräger Bilder ist ziemlich edel. Aber es geht mehr um die Reise als das Ziel (da

Größenänderung der Werte in Schritten in CSSGrößenänderung der Werte in Schritten in CSSApr 12, 2025 am 09:28 AM

Es gibt tatsächlich eine Schritte () -Funktion in CSS, aber sie wird nur zur Animation verwendet. Sie können zum Beispiel ein Element mitteilen, dass es in der Höhe wachsen durfte, aber nur

Die automatisch fließenden Kräfte von Grid ' S dichtes SchlüsselwortDie automatisch fließenden Kräfte von Grid ' S dichtes SchlüsselwortApr 12, 2025 am 09:23 AM

Lassen Sie sich sagen, wir arbeiten an der Homepage einer Nachrichtenwebsite. Sie werden es wahrscheinlich gewohnt, einige kartenbasierte Inhalte in einem Gitterlayout zu sehen, oder? Hier ist ein Klassiker

Verwendet diesVerwendet diesApr 12, 2025 am 09:22 AM

Ein kleines Interview mit mir über verwendet dies. Ich werde das Intro überspringen, da Sie wissen, wer ich bin, aber ich werde den Rest hier veröffentlichen.

Text auf Scrollen animierenText auf Scrollen animierenApr 12, 2025 am 09:18 AM

Wir haben die Idee behandelt, gekrümmte Text vor kurzem zu animieren, als ein lustiger Artikel der New York Times herauskam. Alles was ich tat war zu sehen, wie sie es taten und das extrahiert haben

SchneedeckeSchneedeckeApr 12, 2025 am 09:17 AM

Schneedecke. Ich liebe diesen Namen. Dies ist das Neue von den Pika -Leuten, die etwas zu etwas haben. Es ist in gewissem Sinne eine Bundler -Alternative. Es läuft über Pakete

Netnewswire und FeedbinNetnewswire und FeedbinApr 12, 2025 am 09:15 AM

Netnewswire ist eine der klassischen RSS-Apps, die im Jahr 2002 debütiert haben. Ich war ziemlich begeistert, als es 5.0 ging und im August 2019 Open-Soured war! Sie können es richtig schnappen

So verwandeln Sie eine Verschmelzung in eine WebanimationSo verwandeln Sie eine Verschmelzung in eine WebanimationApr 12, 2025 am 09:14 AM

Ich habe kürzlich angefangen, mit der Procreate -App mit Apple Pencil auf mein iPad zu zeichnen. Ich genieße die Flexibilität, auf diese Weise zu zeichnen. Was mich normalerweise davon abhält

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.