Pozrite sa do veľkosti CSS3 boxu
Nie tak dávno, keď sme vytvorili box na webovej stránke, povedzme s div, špecifikujeme 100px pre šírku i výšku, za ktorými nasleduje vypchávka pre 10px a hranice okolo 10px tiež.
div šírka: 100px; výška: 100px; polstrovanie: 10px; hranica: 10px solid #eaeaea;
Prehliadače rozširujú veľkosť súboru na 140 pixelov, pričom táto suma celkovej šírky / výšky 140px pozostáva z pridania vypchávka a hranice nasledovne; 100px [šírka / výška] + (2 x 10px [polstrovanie]) + (2 x 10px [okraj]).
Tento výsledok však niekedy nie je to, čo očakávame. Niekedy potrebujeme, aby bol box vždycky 100px bez ohľadu na polstrovanie alebo pridanú hranicu.
Aby sme prekonali takýto opakujúci sa problém pri vytváraní rozloženia webovej stránky, môžeme použiť CSS3 box-sizing vlastnosť na kontrolu, ako Model CSS box by mali pracovať v prehliadačoch.
Použitie veľkosti boxu
box-sizing Vlastnosť má dve možnosti, najprv content-box; čo je predvolená hodnota, pri použití tejto hodnoty sa model boxu bude správať tak, ako sme opísali vyššie.
A druhá je border-box, kde bude vypočítaná veľkosť krabice odstránením zadanej veľkosti obsahu s polstrovaním a hranicami pridané.
div šírka: 100px; výška: 100px; polstrovanie: 10px; hranica: 10px solid #eaeaea; rozmery v políčku: okrajové pole; -moz-box-veľkosť: okraj-box; / * Firefox 1-3 * / -webkit-box-size: box-border; / * Safari * /
Napríklad, keď máme krabicu, ako sme opísali vyššie (100px square s 10 pixelmi pre polstrovanie a hranice), veľkosť obsahu sa zníži na 60 pixelov, a zostáva celková veľkosť krabice 100px, kde rovnica odčítania môže byť opísaná nasledovne; 100px [šírka / výška] - ((2 x 10px [výplň]) + (2 x 10px [okraj])).
- demonštrácie
- Stiahnuť zdroj
Podpora prehliadača
box-sizing nehnuteľnosť je podporované vo všetkých prehliadačoch; Firefox 3.6+, Safari 3, Opera 8.5+ a Internet Explorer 8 a vyššie.
Ak viete, že väčšina návštevníkov nebude používať verzie Internet Explorer pod 8, môžete použiť toto užitočné odporúčanie (vďaka Paulovi Irishovi).
* box-size: border-box; -moz-box-veľkosť: okraj-box; / * Firefox 1-3 * / -webkit-box-size: box-border; / * Safari * /
Hore uvedený úryvok použije box-sizing vlastnosť na všetky prvky na vašej webovej stránke.
príklad
V tejto časti vám ukážeme skutočný príklad, ako môžeme využiť túto skutočnosť box-sizing vlastnosť. Vytvoríme jednoduchú navigáciu založenú na značke HTML nižšie s piatimi odkazmi v nej.
Potom pridáme niektoré dekoratívne štýly; ako napríklad nastaviť navigáciu fixná šírka pre 500px a šírka odkazu na 100 px, potom zarovnajte položku zoznamu a dajte rôzne pozadia pre každé menu odkazov, aby ste mohli vidieť rozdiel medzi nimi.
nav šírka: 500px; okraj: 50 pixelov auto 0; výška: 50px; nav ul padding: 0; rozpätie: 0; nav li float: vľavo; nav a zobrazenie: inline-block; šírka: 100px; výška: 100%; farba pozadia: #ccc; farba: # 555; textová výzdoba: žiadne; font-family: Arial, sans-serif; veľkosť písma: 12pt; výška výšky: 300%; text-align: center; nav a zobrazenie: inline-block; šírka: 100px; výška: 100%; farba: # 555; textová výzdoba: žiadne; font-family: Arial, sans-serif; nav li: nth-child (1) a farba pozadia: # E9E9E9; border-left: 0; nav li: nth-child (2) a farba pozadia: # E4E4E4; nav li: nth-dieťa (3) a background-color: #DFDFDF; nav li: nth-child (4) a farba pozadia: # D9D9D9; nav li: n-dieťa (5) a farba pozadia: # D4D4D4; okraj-doprava: 0;
V tejto chvíli naša navigácia vyzerá normálne.
Problém však príde, keď do ponuky prepojenia pridáme ľavý alebo pravý okraj.
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;
Ponuka pretečie dole, pretože šírka odkazu už nie je 100px. Je teraz 102px, čo spôsobí celkovú šírku navigácie 10px dlhšie, ako sme už uviedli (500px).
Ak chcete tento problém prekonať, musíme ho použiť box-sizing majetku:
nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; rozmery v políčku: okrajové pole; -moz-box-veľkosť: okraj-box; -webkit-box-size: box-border;
- demonštrácie
- Stiahnuť zdroj
Ďalšie čítanie
A nakoniec, ak ste dobrodruhovým typom a chcete sa do tejto témy ponoriť hlbšie, sme pre vás vytvorili niekoľko vybraných referencií:
- Pochopenie modelu CSS Box - Tech Republic
- Chyba s veľkosťou boxov vo Firefoxe - BugZilla
- Veľkosť boxu FTW - Paul Irish
