Box model

Pod pojmem box-model se nejčastěji rozumí způsob, kterým prohlížeče počítají rozměry nějakého elementu.

Existují dva:

  1. obsahovýbox-sizing: content-box (výchozí)
  2. okrajovýbox-sizing: border-box

Obsahový box model

Pokud zvolíme standardní <!doctype>, ve všech běžně používaných prohlížečích se bude automaticky používat box model obsahový. Co to znamená?

Celková šířka elementu
je rovna: width + padding-left + padding-right + border-left-width + border-right-width
Celková výška elementu
je rovna: height + padding-top + padding-bottom + border-top-width + border-bottom-width

Pokud tedy chceme na stránce vyrobit box o šířce 150 pixelů s rámečkem 1 pixel a odsazením 7 pixelů, musíme značně nepohodlně přepočítat šířku:

150 pxpůvodní šířka
1 pxlevý rámeček
7 pxlevé odsazení
7 pxpravé odsazení
1 pxpravý rámeček
=134 pxnová šířka

Nebo použít další obal.

Obal

V obalu je další element, který nastavuje pouze padding a border, ale nikoliv šířku.

<div style="width: 150px">
  <div style="border: 1px solid #ccc; padding: 7px">
  </div>
</div>

Okrajový box model

Řešením výše uvedené komplikace je box-sizing: border-box, neboli box model okrajový.

Tomu stačí nastavit konečnou šířku (nebo výšku), a ta bude dodržena nezávisle na paddingu i borderu.

Okrajový box model se používá automaticky v Internet Exploererech v případě, že se neuvede <!doctype> nebo když uvedeme takový, který nezapne standardní režim.

Používáme border-box

Internet Explorer od verse 8 a ostatní prohlížeče už mnoho let umí používat okrajový box-model i ve standardním režimu, stačí přidat do CSS:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Ve starších Explorerech lze vyvolat okrajový box model jen shozením do quirk režimu (např. vynecháním <!doctype>). V čemž je zase problém, protože se tím ochudíme o podporu novějších CSS vlastností.

Co zvolit?

  1. Optimalisujeme-li jen pro IE 8 a novější, nabízí se jednoznačně používat box model okrajový.
  2. Optimalisujeme-li i pro starší Explorery, je lepší se smířit s nedostatky obsahového box modelu.
Okrajový box-model

V případě používání cizích / již hotových stylů v obsahovém box modelu může nastat problém.

Naštěstí je možné pro určitý element přepnout box-model zpátky:

.urcity-element, .urcity-element * {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}
Quirk

Podstatná nevýhoda quirku, byť tak lze získat lepší box-model, je již zmíněná nepodpora novějších CSS funkcí, zároveň plno hotových skriptů nebude už v quirku fungovat.

Vlastnosti min/max-width/height

CSS vlastnosti pro minimální/maximální šířku/výšku (min-width/max-width a min-height/max-height) hodnotu vlastnosti box-sizing ignorují v Internet Exploreru 8 a možná ještě v nějakých starších prohlížečích.

I přes nastavený border-box (okrajový box model) počítají rozměry v obsahovém. Ukázka.

Historický vývoj

Historický vývoj jednotlivých box modelů je hezky popsán ve článku V kaskádovém ringu.

V dnešní době, kdy odumírá poslední prohlížeč, co neumí okrajový box model ve standardním režimu (Internet Explorer 7), se zdá, že budoucnost patří border-boxu. A výchozí content-box nemá/nebude prakticky smysl používat.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře