Pogled u CSS3 okvir veličine

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Ne tako davno, kad stvaramo kutija na web stranici, recimo s a div, navodimo 100piks za širinu i visinu, nakon čega slijedi punjenje za 10px i granice oko 10px također.

 div širina: 100px; visina: 100px; obloga: 10px; granica: 10px čvrsti #eaeaea;

Preglednici će proširiti veličinu okvira na 140 piksela, gdje se taj iznos od 140 px ukupne širine / visine sastoji od dodatka punjenje i granice kako slijedi; 100px [širina / visina] + (2 x 10px [padding]) + (2 x 10px [obrub]).

Međutim, ponekad ovaj rezultat nije ono što očekujemo. Ponekad nam treba kutija da uvijek bude 100piks bez obzira na dodavanje obruba ili granice.

Da bismo prevladali takav problem koji se ponavlja pri izradi izgleda web stranica, možemo koristiti CSS3 kutija-kalibracija imovine za kontrolu kako CSS box model treba raditi u preglednicima.

Korištenje veličine kutije

kutija-kalibracija svojstvo ima dvije opcije vrijednosti, prvo sadržaj kutija; što je zadana vrijednost, kada se koristi ova vrijednost, model okvira će se ponašati kao što smo gore opisali.

A druga je border-box, gdje će se izračunati veličina kutije oduzimanjem određene veličine sadržaja s dodavanjem obloge i granica.

 div širina: 100px; visina: 100px; obloga: 10px; granica: 10px čvrsti #eaeaea; dimenzioniranje kutije: granični okvir; -moz-box-sizing: granični okvir; / * Firefox 1-3 * / -webkit-box-sizing: granični okvir; / * Safari * /

Na primjer, kada imamo okvir poput onoga što smo gore opisali (kvadratić od 100 piksela s 10 piksela za obloge i granice), veličina sadržaja smanjit će se na 60 px, i ukupna veličina kutije ostaje 100piks, gdje se jednadžba oduzimanja može opisati kako slijedi; 100px [širina / visina] - ((2 x 10px [padding]) + (2 x 10px [granica])).

Demo
Preuzimanje izvora

Podrška za preglednik

kutija-kalibracija vlasništvo u svim preglednicima; Firefox 3.6+, Safari 3, Opera 8.5+ i Internet Explorer 8 i noviji.

Dakle, ako znate da većina vaših posjetitelja neće koristiti verzije preglednika Internet Explorer ispod 8, možete koristiti ovu korisnu preporuku (zahvaljujući Paulu Irish).

 * box-sizing: granični okvir; -moz-box-sizing: granični okvir; / * Firefox 1-3 * / -webkit-box-sizing: granični okvir; / * Safari * /

Gornji isječak će se primjenjivati kutija-kalibracija na sve elemente na vašoj web stranici.

Primjer

U ovom ćemo vam odjeljku pokazati primjere iz stvarnog života o tome kako to iskoristiti kutija-kalibracija nekretnine. Napravit ćemo jednostavnu navigaciju, koja se temelji na donjoj HTML oznaci, s pet izbornika veze u njemu.

  Izbornik 1
 Izbornik 2
 Izbornik 3
 Izbornik 4
 Izbornik 5

Zatim ćemo dodati neke ukrasne stilove; kao što je, postavite navigaciju fiksna širina za 500px i širina veze je 100px svaka, zatim umetnite stavku popisa i navedite različite pozadine za svaki izbornik veza, tako da možete vidjeti razliku između njih.

 nav širina: 500px; margina: 50px auto 0; visina: 50px;  nav ul punjenje: 0; margina: 0;  nav li float: lijevo;  nav a display: inline-block; širina: 100px; visina: 100%; boja pozadine: #ccc; boja: # 555; text-decoration: none; obitelj fontova: Arial, sans-serif; veličina fonta: 12pt; visina linije: 300%; poravnavanje teksta: centar;  nav a display: inline-block; širina: 100px; visina: 100%; boja: # 555; text-decoration: none; obitelj fontova: Arial, sans-serif;  nav li: nth-child (1) a background-color: # E9E9E9; granica lijevo: 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 pozadinska boja: # D4D4D4; granica desno: 0;

U ovom trenutku naša navigacija izgleda normalno.

Međutim, problem će doći kada dodamo lijevu ili desnu granicu u izbornik veza.

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

Izbornik će se preliti na dno jer širina veze više nije 100piks. To je sada 102px, uzrokuje ukupnu širinu navigacije 10px duže od navedenog gore (500px).

Da bismo riješili taj problem, moramo primijeniti kutija-kalibracija vlasništvo, kako slijedi:

 nav a border-left: 1px solid #aaa; granica desno: 1px solid # f3f3f3; dimenzioniranje kutije: granični okvir; -moz-box-sizing: granični okvir; -webkit-box-sizing: granični okvir;

Demo
Preuzimanje izvora

Daljnje čitanje

I konačno, ako ste avanturistički tip i želite dublje proučiti ovu temu, sastavili smo nekoliko odabranih referenci za vas:

Razumijevanje CSS Box Model - Tech Republika
Pogreška u dimenzijama okvira u Firefoxu - BugZilla
Dimenzioniranje kutija FTW - Paul Irish