Podívejte se do CSS3 Box-velikosti

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

Není to tak dávno, kdy jsme vytvořili box na webové stránce, řekněme s div, specifikujeme 100px pro šířku i výšku, za kterým následuje polstrování pro 10px a hranic o 10px také.

 div width: 100px; výška: 100px; polstrování: 10px; hranice: 10px pevná #eaeaea;

Prohlížeče rozbalí velikost krabice na 140px, kde toto množství 140px celkové šířky / výšky je tvořeno přidáním polstrování a hranic jak následuje; 100px [šířka / výška] + (2 x 10px [polstrování]) + (2 x 10px [okraj]).

Někdy však tento výsledek není to, co očekáváme. Někdy potřebujeme, aby krabice byla vždy 100px bez ohledu na polstrování nebo přidané okraje.

K překonání takového opakujícího se problému při vytváření rozložení webové stránky můžeme použít CSS3 velikost krabice kontrolovat, jak CSS box model by měl fungovat v prohlížečích.

Použití box-velikosti

velikost krabice vlastnost má dvě možnosti hodnoty, nejprve obsah; což je výchozí hodnota, při použití této hodnoty se model krabice bude chovat tak, jak jsme popsali výše.

A druhá je rámeček, kde bude vypočítána velikost krabice odečtením velikosti zadaného obsahu s polstrováním a přidanými okraji.

 div width: 100px; výška: 100px; polstrování: 10px; hranice: 10px pevná #eaeaea; velikost krabice: rámeček; -moz-box-velikosti: hraniční box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Například, když máme krabici jako to, co jsme popsali výše (100px čtverec s 10 pixely pro polstrování a ohraničení), velikost obsahu se sníží na 60px, a celková velikost krabice zůstane 100px, kde rovnice odčítání může být popsána následovně; 100px [šířka / výška] - ((2 x 10px [polstrování]) + (2 x 10px [okraj])).

Demo
Stáhněte si zdroj

Podpora prohlížeče

velikost krabice nemovitost je podporovány ve všech prohlížečích; Firefox 3.6+, Safari 3, Opera 8.5+ a Internet Explorer 8 a vyšší.

Pokud tedy víte, že většina vašich návštěvníků nebude používat verze aplikace Internet Explorer nižší než 8, můžete použít toto užitečné doporučení (díky Paulovi Irovi).

 * box-size: border-box; -moz-box-velikosti: hraniční box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Výše uvedený úryvek bude aplikovat velikost krabice na všechny prvky na vaší webové stránce.

Příklad

V této sekci vám ukážeme příklad skutečného života, jak toho můžeme využít velikost krabice vlastnictví. Vytvoříme jednoduchou navigaci, založenou na HTML značce níže, s pěti odkazovými nabídkami.

  Menu 1
 Menu 2
 Menu 3
 Menu 4
 Menu 5

Pak přidáme několik dekorativních stylů; jako je nastavení navigace fixní šířka pro 500px a šířka odkazu pro každý 100px, pak vložit položku seznamu a dát různá pozadí pro každý odkaz menu, takže můžete vidět rozdíl mezi nimi.

 nav width: 500px; okraj: 50px auto 0; výška: 50px;  nav ul padding: 0; marže: 0;  nav li float: vlevo;  nav a zobrazení: inline-block; šířka: 100px; výška: 100%; barva pozadí: #ccc; barva: # 555; text-decoration: žádný; font-family: Arial, sans-serif; velikost písma: 12pt; výška řádku: 300%; zarovnání textu: střed;  nav a zobrazení: inline-block; šířka: 100px; výška: 100%; barva: # 555; text-decoration: žádný; font-family: Arial, sans-serif;  nav li: nth-child (1) a background-color: # E9E9E9; border-left: 0;  nav li: nth-child (2) a background-color: # E4E4E4;  nav li: nth-child (3) a background-color: #DFDFDF;  nav li: nth-child (4) a background-color: # D9D9D9;  nav li: nth-child (5) a background-color: # D4D4D4; border-right: 0;

V této chvíli naše navigace vypadá normálně.

Problém však nastane, když do nabídky propojení přidáme levé nebo pravé ohraničení.

 nav a border-left: 1px pevná #aaa; border-right: 1px pevné # f3f3f3;

Nabídka se přepíše na dno, protože šířka odkazu již není 100px. To je nyní 102px, způsobuje celkovou šířku navigace 10px déle než jsme uvedli výše (500px).

Abychom tento problém překonali, musíme použít velikost krabice vlastnictví:

 nav a border-left: 1px pevná #aaa; border-right: 1px pevné # f3f3f3; velikost krabice: rámeček; -moz-box-velikosti: hraniční box; -webkit-box-sizing: border-box;

Demo
Stáhněte si zdroj

Další čtení

A konečně, pokud jste dobrodružný typ a chcete se do tohoto tématu hlouběji vrhnout, připravili jsme pro vás několik vybraných referencí:

Pochopení CSS Box Model - Tech Republic
Chyba ve velikosti boxu ve Firefoxu - BugZilla
Box-dimenzování FTW - Paul Irish