box-sizing

Zusammenfassung

Die box-sizing CSS-Eigenschaft wird verwendet, um das Standard CSS Boxmodell zu verändern. Das Boxmodell wird dazu verwendet, Breiten und Höhen von Elementen zu berechnen.

Man kann diese Eigenschaft dazu verwenden, das Verhalten bestimmter Browser nachzuahmen, die die CSS box model Spezifikation nicht erwartungsgemäß unterstützen.

Initialwert	`content-box`
Anwendbar auf	alle Elemente, die Breite oder Höhe akzeptieren
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
box-sizing: content-box;
box-sizing: border-box;

/* Globale Werte */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

Werte

content-box: Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte width und height berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin oder padding.
border-box: Die Werte width und height enthalten padding und border, aber nicht margin. Das ist das Boxmodell, das der Internet Explorer im Quirks mode verwendet.

Formale Syntax

content-box | border-box

Beispiele

/* Unterstützt von Firefox, WebKit, Opera und IE8+ */

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Spezifikationen

Spezifikation	Status	Kommentar
CSS Basic User Interface Module Level 3 Die Definition von 'box-sizing' in dieser Spezifikation.	Anwärter Empfehlung	Ursprüngliche Definition

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Grundlegende Unterstützung	1.0 -webkit [1] 10.0	1.0 (1.7 oder früher)-moz[1] 29.0 (29.0)	8.0 [1]	7.0	3.0 (522)-webkit 5.1 (534.12)

Merkmal	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	2.1-webkit [1] 4.0	1.0 (1.0)-moz [1] 29.0 (29.0)	Mango 7.5	(Ja)	(Ja)

[1] box-sizing wird ignoriert wenn height anhand von window.getComputedStyle berechnet wird. Das trifft mindestens für Firefox 18 (Bug 520992) und Internet Explorer 9, aber nicht für Chrome 24 zu (andere Browser und Eigenschaften sind ungestestet). Anzumerken ist, dass IE9's proprietäre currentStyle Eigenschaft den richtigen Wert für height ausgibt.

[2] Das Herstellerpräfix -webkit wurde in 534.12 entfernt.

Siehe auch

CSS Boxmodell