Beispiel
Gibt an, dass <div> Elemente Polsterung und Rand haben soll im Element die Breite und Höhe enthalten:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Box-Sizing Eigenschaft wird verwendet , um den Browser zu sagen , was die Dimensionierung Eigenschaften (width and height) enthalten sollte.
Sollten sie umfassen die Grenze-Box? Oder nur der Inhalt-Box (das ist der Standardwert der Breite und Höhe Eigenschaften)?
| Standardwert: | content-box |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.boxSizing="border-box" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit- oder -moz- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSS-Syntax
box-sizing: content-box|border-box|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| content-box | Standard. Die Breite und Höhe Eigenschaften (and min/max properties) - (and min/max properties) enthält nur den Inhalt. Border, Polsterung oder Rand sind nicht enthalten |
| border-box | Die Breite und Höhe Eigenschaften (and min/max properties) - (and min/max properties) enthält Inhalt, Polsterung und Grenze, aber nicht die Marge |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Geben Sie zwei umrandeten Kästchen nebeneinander:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Versuch es selber " Verwandte Seiten
CSS3 Tutorial: CSS3 Box Sizing
HTML - DOM - Referenz: boxSizing property