O privire în format CSS3
Nu cu mult timp în urmă, când creăm a cutie într-o pagină web, să zicem cu div, specificăm 100px pentru lățimea și înălțimea, urmate de umplutură pentru 10px și frontiere de aproximativ 10px de asemenea.
div lățime: 100px; înălțime: 100px; padding: 10px; frontieră: 10px solid #eaeaea;
Browser-ele vor extinde dimensiunea casetei la 140px, unde această sumă de 140px din lățimea / înălțimea totală este alcătuită din adăugarea umplutură si frontiere după cum urmează; 100px [lățime / înălțime] + (2 x 10px [padding]) + (2 x 10px [frontieră]).
Cu toate acestea, uneori acest rezultat nu este ceea ce ne așteptăm ca acesta să fie. Uneori, avem nevoie de caseta pentru a fi întotdeauna 100px indiferent de umplutura sau margini adăugate.
Pentru a depăși o astfel de problemă recurentă la crearea paginii web, putem folosi CSS3 box-dimensionare proprietate pentru a controla modul în care Modelul cutie CSS ar trebui să lucreze în browsere.
Folosind dimensionarea în cutie
box-dimensionare proprietatea are două opțiuni de valoare, în primul rând conținut-box; care este valoarea implicită, atunci când se utilizează această valoare, modelul cutiei va acționa după cum am descris mai sus.
Și al doilea este frontieră-box, unde dimensiunea casetei va fi calculată prin scăderea dimensiunii conținutului specificat cu padding-ul și marginea adăugată.
div lățime: 100px; înălțime: 100px; padding: 10px; frontieră: 10px solid #eaeaea; dimensiunea cutiei: caseta de margine; -moz-box-dimensionare: caseta de margine; / * Firefox 1-3 * / -webkit-box-size: caseta de frontieră; / * Safari * /
De exemplu, atunci când avem o cutie ca cele descrise mai sus (100 pixeli pătrați cu 10 pixeli pentru padding și frontiere), dimensiunea conținutului va scădea la 60 px, iar dimensiunea totală a casetei rămâne 100px, unde ecuația scăderii poate fi descrisă după cum urmează; 100px [lățime / înălțime] - ((2 x 10px [padding]) + (2 x 10px [border])).
- Demo
- Descărcați sursa
Suport pentru browser
box-dimensionare proprietatea este acceptate în toate browserele; Firefox 3.6+, Safari 3, Opera 8.5+ și Internet Explorer 8 și versiuni ulterioare.
Deci, dacă știți că majoritatea vizitatorilor dvs. nu vor utiliza versiunile Internet Explorer sub 8, puteți utiliza această recomandare utilă (mulțumită lui Paul Irish).
* size-box: border-box; -moz-box-dimensionare: caseta de margine; / * Firefox 1-3 * / -webkit-box-size: caseta de frontieră; / * Safari * /
Fragmentul de mai sus se va aplica box-dimensionare proprietăți tuturor elementelor de pe pagina dvs. web.
Exemplu
În această secțiune, vă vom arăta un exemplu real în ceea ce privește modul în care putem folosi acest lucru box-dimensionare proprietate. Vom crea o navigare simplă bazată pe marcajul HTML de mai jos, cu cinci meniuri de link-uri în el.
Apoi, vom adăuga câteva stiluri decorative; cum ar fi, setați navigația fixați lățimea pentru 500px și lățimea liniei pentru câte 100 de pixeli fiecare, apoi introduceți elementul listei și dați fundaluri diferite pentru fiecare meniu de legătură, astfel încât să puteți vedea diferența dintre ele.
nav lățime: 500px; margine: 50 pixeli automat 0; înălțime: 50px; nav ul padding: 0; marja: 0; nav li float: stânga; nav a display: inline-block; lățime: 100px; înălțime: 100%; fundal-culoare: #ccc; culoare: # 555; text-decorare: nici unul; font-family: Arial, sans-serif; font-size: 12pt; înălțimea liniei: 300%; text-align: centru; nav a display: inline-block; lățime: 100px; înălțime: 100%; culoare: # 555; text-decorare: nici unul; font-family: Arial, sans-serif; nav li: n-copil (1) a background-color: # E9E9E9; frontieră-stânga: 0; nav li: n-copil (2) a background-color: # E4E4E4; nav li: n-copil (3) a background-color: #DFDFDF; nav li: n-copil (4) a background-color: # D9D9D9; nav li: n-copil (5) a background-color: # D4D4D4; frontieră-dreapta: 0;
În acest moment, navigația noastră arată doar normal.
Cu toate acestea, problema va veni atunci când adăugăm margini stânga sau dreaptă la meniul de link-uri.
nav frontieră-stânga: 1px solid #aaa; frontieră-dreapta: 1px solid # f3f3f3;
Meniul va trece în partea de jos, deoarece lățimea liniei nu mai este 100px. Este acum 102px, cauzând lățimea totală a navigației 10px mai mult decât am specificat mai sus (500px).
Pentru a depăși această problemă, trebuie să aplicăm box-dimensionare proprietate, după cum urmează:
nav frontieră-stânga: 1px solid #aaa; frontieră-dreapta: 1px solid # f3f3f3; dimensiunea cutiei: caseta de margine; -moz-box-dimensionare: caseta de margine; -webkit-box-dimensioning: border-box;
- Demo
- Descărcați sursa
Citirea în continuare
Și, în cele din urmă, dacă sunteți tipul aventuros și doriți să căutați mai adânc în acest subiect, am pus împreună câteva referințe selectate pentru dvs.:
- Înțelegerea modelului CSS Box - Republica Tehnică
- Box bug-uri de dimensionare în Firefox - BugZilla
- Box FTW - Paul Irish
