Analyse von Box (Box-Modus) in CSS_CSS/HTML

In diesem Artikel wird die Box-Darstellung verwendet, um die Box (Box-Modus) in CSS zu analysieren und ein klares Modell für Leser zu erstellen, die CSS lernen.

Das vom W3C definierte Boxmuster lautet wie folgt:

Breite und Höhe definieren die Breite und Höhe des Inhaltsteils, und die Breite des Füllrandrands wird wiederum nach außen hinzugefügt. Der Hintergrund füllt die Polster- und Inhaltsteile aus.
Aufgrund von Browser-Designproblemen werden die Anzeigeeffekte verschiedener Browser jedoch etwas unterschiedlich sein.
Das Problem der Verdoppelung des linken und rechten Randes
Wenn die Box schwebend ist, verdoppeln sich der linke und rechte Rand der Box in IE6
Der linke Rand der linken Innenseite ist offensichtlich größer als 5 Pixel.
Definieren Sie zu diesem Zeitpunkt das Anzeigeattribut von inner als inline.
Das Problem mit der automatischen Höhenberechnung der äußeren Box
Laut W3C-Definition berechnet die äußere Box ohne Float-Attribut nicht automatisch die Höhe. Um die Höhe zu berechnen, müssen beide zur letzten Box hinzugefügt werden die innere Schicht.
Opera, Netscape, Mozilla usw. berechnen die Höhe des äußeren Rahmens nicht, aber Microsoft ie6 berechnet die Höhe des äußeren Rahmens automatisch.

Der obige Code hat im IE einen schwarzen Hintergrund, aber der obere und untere Rand werden nicht korrekt berechnet. Nach dem Hinzufügen eines div mit dem Attribut „clear:both“ unter inner2 kann der Rand korrekt berechnet werden. Aber es gibt immer noch keinen schwarzen Hintergrund in Firefox. Die übliche Lösung besteht darin, die Höhe des clear:both-Divs zu definieren oder ein Leerzeichen in voller Breite einzufügen, sodass zusätzliche Höhe hinzugefügt werden muss. Eine bessere Online-Lösung besteht darin, das Überlaufattribut zum äußeren Div hinzuzufügen und gleichzeitig „clear:both“ zu verwenden, sodass keine zusätzliche Höhe hinzugefügt wird.

Daher muss das Überlaufattribut in der äußeren CSS-Ebene definiert werden und das Clear-Attribut am Ende zur inneren Ebene hinzugefügt werden.
Zentrierungsproblem
Sie müssen die Breite des Elements und den horizontalen Rand definieren. Wenn Ihr Layout in einer Ebene (Container) enthalten ist, gehen Sie wie folgt vor:
Sie können es so definieren, um es zu zentrieren horizontal:
#wrap {
width:760px /* An die Breite Ihrer Ebene anpassen*/
margin:0 auto;

Aber IE5/Win kann diese Definition nicht korrekt anzeigen. Wir verwenden einen sehr nützlichen Trick, um das Problem zu lösen: Verwenden Sie das text-align-Attribut in der äußeren Ebene. So:

#outer {
text-align:center;}
#wrap {
width:760px; /* Ändern Sie die Breite Ihrer Ebene*/
margin :0 auto;
text-align:left
}

Die erste text-align:center;-Regel von #outer definiert, dass alle Elemente von #outer in IE5/Win zentriert sind (andere Browser zentrieren nur den Text), und die zweite text-align:left ist; Verschieben Sie den Text in #warp nach links.

Daher sollte in CSS mit zentrierten Elementen das äußere CSS das text-align:center-Attribut definieren, die innere Zentrierung sollte mit margin:x auto x auto definiert werden und text-align sollte neu definiert werden.