This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use 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 spec changes.
Souhrn
CSS vlastnost box-sizing se používá ke změně výchozího CSS box modelu, který určuje šířku a výšku elementů. Tuto vlastnost je možné použít pro emulaci chování prohlížečů, které přesně nedodržují specifikaci CSS box model.
- 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
Syntaxe
Formální syntaxe: content-box | border-box
box-sizing: content-box box-sizing: padding-box box-sizing: border-box box-sizing: inherit
Hodnoty
content-box- Toto je výchozí styl, jak je stanoveno ve standardu CSS. Vlastnosti
widthaheighturčují velikost samotného obsahu bez okolních oblastí, jako je vnitřek nebo vnější okolí rámečku. padding-box- Vlastnosti
widthaheightzahrnují rozměry vnitřní výplně rámečku (padding), ale ne samotný rámeček a jeho okolí. border-box- Vlastnosti
widthaheightzahrnují hranici rámečku, ale ne jeho okolí (margin). Tento box model používá Internet Explorer, když je v režimu Quirk.
Příklady
/* support Firefox, WebKit, Opera and IE8+ */
.example {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Specifikace
| Specifikace | Status | Komentář |
|---|---|---|
| CSS Basic User Interface Module Level 3 The definition of 'box-sizing' in that specification. |
Candidate Recommendation |
Kompatibilita prohlížečů
| Funkce | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Základní podpora | 1.0-webkit 9.0 |
1.0 (1.0)-moz [1] |
8.0 |
7.0 | 3.0 (522)-webkit 5.1 (534.12) |
padding-box |
Not supported | 1.0 (1.0) | ? | Not supported | ? |
| Funkce | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Základní podpora | (Yes) | 1.0 (1.0)-moz [1] | Mango 7.5 | (Yes) | (Yes) |
padding-box |
? | 1.0 (1.0) | ? | ? | ? |
Poznámky
[1] Experimentální implementace (s prefixem) box-sizing obsahuje několik chyb (chyba 243412). Ty jsou krůček po krůčku opravovány:
- Před Geckem 16.0 (Firefox 16)
-moz-box-sizingnefungoval na buňky tabulek (chyba 338554); - Před Geckem 17.0 (Firefox 17) vlastnosti
min-height/max-heightnefungují s-moz-box-sizing: border-box(chyba 308801)
box-sizing není respektována, když height vypočítána z window.getComputedStyle, nejméně ve Firefoxu 18 (chyba 520992) a Internet Exploreru 9, ne však v Chrome 24 (jiné prohléžeče a vlastnosati netestovány). Note that IE9's proprietary currentStyle property does return the correct value of height.
V Gecku zatím neexistuje implementace bez předpony.