Mehrere 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.