Ein Blick in CSS3 Box-Sizing
Vor nicht allzu langer Zeit, als wir ein erstellen Box in einer Webseite sagen wir mit a div, wir geben an 100px sowohl für die Breite als auch für die Höhe, gefolgt von Polsterung zum 10px und Grenzen von etwa 10px auch.
div Breite: 100px; Höhe: 100px; Polsterung: 10px; Grenze: 10px fest #eaeaea;
Die Browser vergrößern die Größe der Box auf 140 Pixel, wobei sich dieser Betrag auf 140 Pixel der gesamten Breite / Höhe aus der Addition von Polsterung und das Grenzen wie folgt; 100px [Breite / Höhe] + (2 x 10px [Abstand]) + (2 x 10px [Rand]).
Manchmal ist dieses Ergebnis jedoch nicht das, was wir erwarten. Manchmal brauchen wir die Box immer 100px unabhängig von der Auffüllung oder den hinzugefügten Rändern.
Um ein solches wiederkehrendes Problem beim Erstellen eines Webseitenlayouts zu überwinden, können Sie CSS3 verwenden Box-Sizing Eigenschaft, um zu steuern, wie die CSS-Boxmodell sollte in den Browsern funktionieren.
Verwenden von Box-Sizing
Das Box-Sizing Eigenschaft hat zwei Wertoptionen, zuerst die Inhaltsfeld; Dies ist der Standardwert. Wenn Sie diesen Wert verwenden, verhält sich das Boxmodell wie oben beschrieben.
Und der zweite ist Border-Box, wo die Größe der Box berechnet wird indem Sie die Größe des angegebenen Inhalts subtrahieren mit der Auffüllung und den Rändern hinzugefügt.
div Breite: 100px; Höhe: 100px; Polsterung: 10px; Grenze: 10px fest #eaeaea; Box-Dimensionierung: Border-Box; -moz-box-dimensionierung: border-box; / * Firefox 1-3 * / -webkit-box-size: border-box; / * Safari * /
Wenn wir beispielsweise eine Box wie oben beschrieben haben (100px-Quadrat mit 10 Pixeln für die Auffüllung und die Ränder), verringert sich die Größe des Inhalts auf 60px, und die Gesamtgröße der Box bleibt erhalten 100px, wo die Gleichung der Subtraktion wie folgt beschrieben werden kann; 100px [Breite / Höhe] - ((2 x 10px [Auffüllen]) + (2 x 10px [Rand])).
- Demo
- Quelle herunterladen
Browser-Unterstützung
Das Box-Sizing Eigentum ist wird in allen Browsern unterstützt; Firefox 3.6+, Safari 3, Opera 8.5+ und Internet Explorer 8 und höher.
Wenn Sie also wissen, dass die meisten Besucher keine Internet Explorer-Version unter 8 verwenden, können Sie diese nützliche Empfehlung verwenden (Dank an Paul Irish)..
* Box-Sizing: Border-Box; -moz-box-dimensionierung: border-box; / * Firefox 1-3 * / -webkit-box-size: border-box; / * Safari * /
Das obige Snippet wendet das an Box-Sizing Eigenschaft für alle Elemente auf Ihrer Webseite.
Beispiel
In diesem Abschnitt zeigen wir Ihnen ein reales Beispiel, wie wir davon Gebrauch machen können Box-Sizing Eigentum. Wir erstellen eine einfache Navigation basierend auf der HTML-Markierung unten mit fünf Link-Menüs.
Dann werden wir einige dekorative Stile hinzufügen; Stellen Sie beispielsweise die Navigation ein Breite für festlegen 500px und die Linkbreite für jeweils 100px, Inline das Listenelement ein, und geben Sie für jedes Link-Menü unterschiedliche Hintergründe an, damit Sie den Unterschied zwischen ihnen erkennen können.
Nav Breite: 500px; Marge: 50px Auto 0; Höhe: 50px; nav ul padding: 0; Marge: 0; nav li float: left; nav a display: Inline-Block; Breite: 100px; Höhe: 100%; Hintergrundfarbe: #ccc; Farbe: # 555; Textdekoration: keine; Schriftfamilie: Arial, serifenlos; Schriftgröße: 12pt; Zeilenhöhe: 300%; Text ausrichten: Mitte; nav a display: Inline-Block; Breite: 100px; Höhe: 100%; Farbe: # 555; Textdekoration: keine; Schriftfamilie: Arial, serifenlos; nav li: nth-child (1) a Hintergrundfarbe: # E9E9E9; Grenze links: 0; nav li: nth-child (2) a Hintergrundfarbe: # E4E4E4; nav li: nth-child (3) a Hintergrundfarbe: #DFDFDF; nav li: nth-child (4) a Hintergrundfarbe: # D9D9D9; nav li: nth-child (5) a Hintergrundfarbe: # D4D4D4; rechtsbündig: 0;
An diesem Punkt sieht unsere Navigation einfach normal aus.
Das Problem wird jedoch auftreten, wenn wir dem Link-Menü linke oder rechte Ränder hinzufügen.
nav a grenz links: 1px solide #aaa; Rahmen rechts: 1px fest # f3f3f3;
Das Menü wird nach unten überlaufen, da die Breite der Verknüpfung nicht länger ist 100px. Ist das jetzt 102px, Dadurch wird die Gesamtbreite der Navigation festgelegt 10px länger als oben angegeben (500px).
Um dieses Problem zu lösen, müssen wir die Box-Sizing Eigentum wie folgt:
nav a grenz links: 1px solide #aaa; Rahmen rechts: 1px fest # f3f3f3; Box-Dimensionierung: Border-Box; -moz-box-dimensionierung: border-box; -webkit-box-dimensionierung: border-box;
- Demo
- Quelle herunterladen
Lesen Sie weiter
Und wenn Sie abenteuerlustig sind und sich tiefer in dieses Thema einarbeiten möchten, haben wir für Sie einige ausgewählte Referenzen zusammengestellt:
- Verständnis des CSS-Box-Modells - Tech Republic
- Fehler bei der Box-Dimensionierung in Firefox - BugZilla
- Box-Sizing FTW - Paul Irish
