box-sizing

von 3 Mitwirkenden:

Zusammenfassung

Die box-sizing CSS-Eigenschaft wird verwendet, um das Standard CSS box model zu verändern. Das box model 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 all Elemente that accept width oder height
  • Vererbt Nein
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert siehe Spezifikation
  • Animierbar Nein
  • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

Syntax

Formale Syntax: content-box | padding-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

box-sizing: inherit

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.
padding-box
Die Werte width und height enthalten die Größe des padding, enthalten aber weder margin noch border.
border-box
Die Werte width und height enthalten padding und border, aber nicht margin. Das ist das box model, das der Internet Explorer im Quirks mode verwendet.

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.
Arbeitsentwurf  

Browserkompabilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 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)
padding-box Nicht unterstützt 1.0 (1.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1-webkit [1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
Mango 7.5 (Ja) (Ja)
padding-box Nicht unterstützt 1.0 (1.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt

Anmerkungen

[1] Die experimentelle, mit Präfix versehene Implementation von box-sizing hat ein paar Bugs (Bug 243412). Diese werden nach und nach ausgebessert:

  • Bis Gecko Version 16.0 (Firefox 16) wurde -moz-box-sizing nicht auf Tabellenspalten angewendet (Bug 338554);
  • Bis Gecko Version 17.0 (Firefox 17) haben die CSS Eigenschaften min-height/max-height nicht mit -moz-box-sizing: border-box funktioniert (Bug 308801)

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.

Es existiert noch keine Implementation ohne Präfix in Gecko.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: tronsha, fscholz, maxstrebel
Zuletzt aktualisiert von: tronsha,