box-sizing

by 2 contributors:

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 | padding-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 width a height určují velikost samotného obsahu bez okolních oblastí, jako je vnitřek nebo vnější okolí rámečku.
padding-box
Vlastnosti width a height zahrnují rozměry vnitřní výplně rámečku (padding), ale ne samotný rámeček a jeho okolí.
border-box
Vlastnosti width a height zahrnují 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 Working Draft  

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-sizing nefungoval na buňky tabulek (chyba 338554);
  • Před Geckem 17.0 (Firefox 17) vlastnosti min-height/max-height nefungují 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.

Viz také

Document Tags and Contributors

Contributors to this page: teoli, makovickym
Last updated by: teoli,
Hide Sidebar