Pogled v CSS3 Box-sizing

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

Ne tako dolgo nazaj, ko ustvarjamo škatla na spletni strani, recimo z a div, določamo 100px za širino in višino, ki ji sledi oblazinjenje za 10 px in meje približno 10 px prav tako.

 div širina: 100px; višina: 100px; oblazinjenje: 10px; meja: 10px trdna #eaeaea;

Brskalniki bodo razširili velikost polja na 140 px, pri čemer je ta znesek 140px skupne širine / višine sestavljen iz dodatka oblazinjenje in meja kot sledi; 100px [širina / višina] + (2 x 10px [oblazinjenje]) + (2 x 10px [obroba]).

Vendar včasih ta rezultat ni tisto, kar pričakujemo. Včasih potrebujemo polje vedno 100px ne glede na dodano oblogo ali meje.

Za odpravo takšne ponavljajoče težave pri ustvarjanju postavitve spletne strani lahko uporabimo CSS3 velikost škatle lastnost za nadzor nad tem, kako Model škatle CSS delovati v brskalnikih.

Uporaba velikosti škatle

The velikost škatle lastnost ima dve možnosti vrednosti, najprej vsebina-box; ki je privzeta vrednost, se bo pri uporabi te vrednosti model polja obnašal, kot smo opisali zgoraj.

In druga je obrobo, kjer bo izračunana velikost polja tako, da odvzame velikost določene vsebine z dodanim oblazinjenjem in obrobo.

 div širina: 100px; višina: 100px; oblazinjenje: 10px; meja: 10px trdna #eaeaea; velikost škatle: obrobno polje; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Na primer, ko imamo okvir, kot smo opisali zgoraj (kvadratek 100 px z 10 pikami za oblazinjenje in meje), se bo velikost vsebine zmanjšala na 60px, in skupna velikost polja ostane 100px, kjer lahko enačbo odštevanja opišemo kot sledi; 100px [širina / višina] - ((2 x 10px [oblazinjenje]) + (2 x 10px [obroba])).

Demo
Prenesi vir

Podpora za brskalnik

The velikost škatle lastnine v vseh brskalnikih; Firefox 3.6+, Safari 3, Opera 8.5+ in Internet Explorer 8 in novejši.

Torej, če veste, da večina vaših obiskovalcev ne bo uporabljala različic Internet Explorerja pod 8, lahko uporabite to koristno priporočilo (zahvaljujoč Paul Irish).

 * box-sizing: mejna škatla; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Zgornji odrezek bo uporabil oznako velikost škatle vse elemente na vaši spletni strani.

Primer

V tem razdelku vam bomo pokazali zgled, kako lahko to izkoristimo velikost škatle nepremičnine. Ustvarili bomo preprosto navigacijo, ki temelji na spodnji oznaki HTML, z menijem s petimi povezavami.

  Meni 1
 Meni 2
 Meni 3
 Meni 4
 Meni 5

Nato bomo dodali nekaj dekorativnih stilov; kot je, nastavite navigacijo fiksna širina za 500px in širina povezave je 100px, nato vstavite element seznama in podajte različna ozadja za vsak meni povezave, tako da lahko vidite razlike med njimi.

 nav širina: 500px; margin: 50px auto 0; višina: 50px;  nav ul padding: 0; margin: 0;  nav li float: levo;  nav a prikaz: inline-block; širina: 100px; višina: 100%; barva ozadja: #ccc; barva: # 555; dekoracija besedila: nobena; družina pisav: Arial, sans-serif; velikost pisave: 12pt; višina linije: 300%; text-align: center;  nav a prikaz: inline-block; širina: 100px; višina: 100%; barva: # 555; dekoracija besedila: nobena; družina pisav: Arial, sans-serif;  nav li: nth-child (1) a background-color: # E9E9E9; meja levo: 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; meja desno: 0;

Na tej točki naša navigacija izgleda normalno.

Vendar pa bo težava prišla, ko bomo dodali levo ali desno mejo v meni povezav.

 nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;

Meni se bo prelival na dno, saj širina povezave ni več 100px. Sedaj je 102px, skupna širina navigacije 10 px dlje, kot smo določili zgoraj (500px).

Da bi odpravili to težavo, moramo uporabiti velikost škatle lastnine, kot sledi:

 nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; velikost škatle: obrobno polje; -moz-box-sizing: border-box; -webkit-box-sizing: mejna škatla;

Demo
Prenesi vir

Nadaljnje branje

In končno, če ste avanturističnega tipa in se želite poglobiti v to temo, smo za vas sestavili nekaj izbranih referenc:

Razumevanje modela CSS Box - Tech Republic
Okvara velikosti okvirja v Firefoxu - BugZilla
Velikost škatle FTW - Paul Irish