Das Box-Sizing-Attribut wurde in CSS3 eingeführt. Einige Leute erklären, dass es angeben kann, ob die mit dem Breitenattribut bzw. dem Höhenattribut angegebenen Breiten- und Höhenwerte den Auffüllbereich innerhalb des Elements sowie die Breite und Höhe von enthalten die Grenze. Dieser Satz ist etwas verwirrend. Was ist die Berechnungsmethode für die Höhe und Breite des Containers? Wie können wir ihn intuitiv verstehen? Beispiel. .
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>box-sizing</title><styletype=text/css>div{width:50px;height:50px;margin:10px;padding: 10px;border:10pxsolid#888;}#bs{box-sizing:border-box;}</style></head><body><div></div><divid=bs></div></ Körper></html>Laufergebnisse:
Wie aus dem Bild oben ersichtlich ist, ist der Größenunterschied zwischen den beiden sehr offensichtlich. Wir können den Browser verwenden, um zu sehen, wie die beiden berechnet werden.
Das Bild oben zeigt die traditionelle Berechnungsmethode, bei der es sich um die Größe des ersten Divs oben handelt.
Es ist ersichtlich, dass die tatsächliche Breite des Div 50+10*2+10*2=90px beträgt. Denn die Höhe und Breite, die wir für das Div angeben, beziehen sich auf die Höhe und Breite des Inhaltsbereichs, der in Abbildung 1-1 der innerste Bereich ist.
Die tatsächlich berechnete Größe des zweiten Div im Bild oben beträgt hier 10+10*2+10*2=50px. Nach dieser Berechnung ist klar, dass die Boxgröße auf „Rand“ eingestellt ist. Die Höhe und Breite des Containers schließlich entsprechen der Höhe und Breite des tatsächlichen Containers und beziehen sich nicht einfach auf die Größe des Inhaltsbereichs. Es versteht sich auch, dass die Berechnungsmethode für Höhe und Breite zu diesem Zeitpunkt auch die Polsterung und die Randgröße umfasst.
Optionale Werte für das Box-Sizing-Attribut sind wie folgt:
[Beispiel] Im Folgenden wird anhand eines Beispiels die Verwendung des Box-Sizing-Attributs demonstriert:
<!DOCTYPEhtml><html><head><style>div{width:300px;height:50px;margin-top:5px;border:10pxsolidred;padding:5px;}.two{box-sizing:content-box;} . three{box-sizing:border-box;}</style></head><body><divclass=one>Standard </div><divclass=two>content-box</div><divclass=two > border-box</div></body></html>Laufergebnisse:
