Dit artikel heeft een technische beoordeling nodig. Hoe u kunt helpen.
Dit artikel heeft een redactionele beoordeling nodig. Hoe u kunt helpen.
Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Overzicht
Het box-sizing attribuut wordt gebruikt om het standaard CSS box model aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.
| Initial value | content-box |
|---|---|
| Applies to | all elements that accept width or height |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* Keyword waarden */ box-sizing: content-box; box-sizing: border-box; /* Globale waarden */ box-sizing: inherit; box-sizing: initial; box-sizing: unset;
Waarden
content-box- Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard.
Dewidthenheightattributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld:.box {width: 350px;}Daarna voeg je{border: 10px solid black;}toe. Resultaat: (in browser).box {width:370px;}
Kort samengevat worden de afmetingen van een element berekent als volgt: width = breedte van de content en height = hoogte van de content, exclusief borders of paddings.
border-box- De
widthenheightwaarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld:.box {width: 350px; border: 10px solid black;}resulteert in een gerenderd element metwidth: 350px. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand vanborder-boxeen element de doen verdwijnen. - De afmetingen worden berekend als volgt: width = border + padding + breedte van de inhoud en height = border + padding + hoogte van de inhoud.
Formele syntax
content-box | border-box
Examples
/* ondersteund in Firefox, Chrome, Safari, Opera, IE8+ en oude Android */
.example {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Specificaties
| Specificatie | Status | Opmerking |
|---|---|---|
| CSS Basic User Interface Module Level 3 The definition of 'box-sizing' in that specification. |
Candidate Recommendation | Initiele definitie |
Browser compatibiliteit
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Standaard ondersteuning | 1.0 -webkit[1] 10.0 |
(Yes) | 1.0 (1.7 or earlier)-moz[1] 29.0 (29.0) |
8.0[1] |
7.0 | 3.0 (522)-webkit 5.1[2] |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Standaard ondersteuning | 2.1-webkit[1] 4.0 |
1.0 (1.0)-moz [1] 29.0 (29.0) |
9.0 | (Yes) | (Yes) |
[1] box-sizing wordt niet gerespecteerd als de hoogte wordt berekend door window.getComputedStyle(), in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen currentStyle attribuut geeft niet de juiste waarde voor height terug.
[2] De vendor prefix -webkit is verwijderd sinds 534.12.