CSS 3-Tutorial: Die Box-Sizing-Eigenschaft verstehen
Autor：Eve Cole
Aktualisierungszeit：2009-06-12 17:54:27
Apropos IE-Bugs: Ein berüchtigtes Beispiel ist die falsche Interpretation des „Box-Modells“: In IE5.x und IE6/7 werden im Quirks-Modus sowohl Rahmen als auch Innenabstand in die Breite einbezogen. Dies erschwert die Arbeit der Front-End-Ingenieure erheblich. Jede Box, die eine Größe definieren muss, muss berücksichtigt werden: Löst sie einen „Box-Modell-Fehler“ aus?
Gleichzeitig müssen wir aufgrund der Einhaltung von Standards durch eine andere Gruppe von Browsern auch berechnen, dass der dafür verbleibende Platz nur so groß ist, wenn wir den Rahmen und die Polsterung ausschließen , wir sollten Wie groß ist seine Breite geschrieben?
Diese Situation hat sich in der CSS3-Ära verbessert, dank dieser Eigenschaft namens box-sizing, die zwei Werte hat: „content-box“ und „border-box“.
Bei der Definition von box-sizing: content-box; folgt die Interpretation des Box-Modells durch den Browser dem W3C-Standard, den wir zuvor erkannt haben;
Wenn box-sizing: border-box; definiert ist, ist die Interpretation des Box-Modells durch den Browser dieselbe wie in IE6;
Warum wird dieses Attribut als „spät“ bezeichnet? Obwohl die Interpretation des Box-Modells durch den IE nicht den W3C-Spezifikationen entspricht, hat sie auch Vorteile: Unabhängig davon, wie Sie die Werte von Rahmen und Polsterung ändern, ändert sich dadurch nicht die Gesamtgröße der Box, und das wird auch der Fall sein Das Gesamtlayout der Seite darf nicht beeinträchtigt werden. Wenn wir in modernen Browsern wie Firefox den Wert des Abstands ändern möchten, müssen wir die Breite der Box neu berechnen. Da IE6 nun tot ist, ist diese CSS-Eigenschaft etwas längst überfällig.
Um diese neue Eigenschaft auszuprobieren, verwenden Sie bitte -moz-box-sizing für Firefox, -webkit-box-sizing für Safari/WebKit und nur box-sizing für Opera.
