Top-CSS-Kenntnisse werden freigegeben, Sie müssen wissen, div+css-Layout_Erfahrungsaustausch

CSS-Top-Kenntnisse werden freigegeben, Sie müssen wissen, div+css-Layout_Erfahrungsaustausch

Verwenden Sie px für die Schriftgröße

Deklarieren Sie CSS in einer Zeile
Vergleichen Sie unten Zwei:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 
h2 { 
   font-size:18px; 
   border:1px solid blue; 
   color:#000; 
   background-color:#FFF; 
   }

Das zweite sieht zwar formatiert aus, hilft aber nicht beim Lesen. Wenn Sie in einer Zeile schreiben, können Sie das benötigte Teil schneller finden.

Früher habe ich ähnlich wie bei der zweiten Methode geschrieben, aber nach und nach stellte ich fest, dass sie nicht sehr nützlich war, wie es im Artikel stand. Eine Zeile sieht klar aus, spart Platz und verkleinert die Datei.

Code in Blöcken schreiben
Das Schreiben von Code auf diese Weise kann CSS seitenähnlicher machen, und wenn ein Problem auftritt, kann das Problem in kürzester Zeit gefunden werden. So:

#content {float:left;} 
   #content p { … } 
#sidebar {float:left;} 
   #sidebar p { … } 
#footer {clear:both;} 
   #sidebar p { … }

Browser-Unterstützung
Unterstützt nur die neuesten Browser. Das bedeutet den Verzicht auf IE5 und IE5.5. Das spart viel Zeit. Für IE6 besteht keine Notwendigkeit, den Box-Modell-Hack zu verwenden. Wenn Sie nur auf gängige Browser abzielen, benötigen Sie nur wenige Hacks, um den gleichen Effekt zu erzielen.

Ich habe auf das CSS der neuen Homepage von NetEase geachtet und es ist kein !important oder Hack darin, aber es wird in FF und IE sehr gut angezeigt. Durch den sinnvollen Einsatz von CSS können Hacks vermieden werden. Natürlich wird das Debuggen mehr Zeit in Anspruch nehmen.

Enthält schwebende Elemente
Der gesamte Inhalt im Container sollte so gestaltet sein, dass er mit dem Container konsistent ist. Wenn es zu groß ist, rutscht es in die falsche Position. Die Verwendung negativer Ränder zur Anpassung außerhalb des Containers führt ebenfalls zu einem Verrutschen.

Überlauf verstehen
Wenn es zwei schwebende Elemente auf der Seite gibt, führt die Ausgabe von zu viel Inhalt im linken Container dazu, dass der rechte Container darunter ausgeführt wird. Dies bedeutet, dass Ihre Rand-, Breiten- oder Abstandseinstellungen fehlerhaft sind, dies wird jedoch nicht in FF widergespiegelt. Verwenden Sie overflow:hidden oder overflow:scroll, um zu verhindern, dass IE Inhalte aus dem Container fließen lässt.

Blockelemente können die Lücken automatisch ausfüllen

Abgekürztes CSS
Viele Leute verwenden eine Reihe von Margin-Top, Margin-Right, Margin-Bottom und Margin-Left. Tatsächlich ist dies der grundlegendste Wert, der direkt als „Marge: oben rechts, unten links“ abgekürzt werden kann. Eine Zusammenfassung der CSS-Abkürzungen finden Sie hier.
Vermeiden Sie unnötige Selektoren.
Reduzieren Sie Stilselektoren auf ein Minimum. Wenn Sie ständig ul li {} oder table tr td{} schreiben, beweist das, dass Sie zu detailliert schreiben. Weniger Selektoren erleichtern das Erkennen von Problemen.

Ich habe es nicht vollständig übersetzt und es sind viele meiner eigenen Wörter darin, haha.

Das Obige ist die Veröffentlichung von Top-CSS-Kenntnissen, div+css-Layout-Must-know_experience-Austauschinhalten, für weitere verwandte Inhalte achten Sie bitte auf die chinesische PHP-Website (www.php. cn)!