Proprietatea de dimensionare a casetei CSS este utilizată pentru a regla sau controla dimensiunea oricărui element care acceptă un width sau height. Specifică modul de calcul al totalului width și height a acelui element.
În acest articol, voi explica modul în care CSS box-sizing proprietatea poate fi utilizată pentru a controla dimensiunea elementelor.
Condiții prealabile
- Cunoștințe de bază CSS.
- Editor de cod.
- Browser web.
Fără proprietatea de dimensionare a casetei CSS
Dacă vă uitați la fragmentul de cod de mai jos, veți observa că există două div elemente cu aceleași width și height – dar primul div pare a fi mai mare decât a doua div.
E destul de ciudat, nu? Pentru că de ce ar atribui cineva aceeași lățime și înălțime la două div elemente, cu excepția cazului în care în mod ideal doreau ca aceste elemente să fie aceleași?
Continuați să citiți pentru a afla de ce cei doi div elementele sunt diferite ?? ??? ?.
În mod implicit, fișierul Modelul cutiei CSS calculează orice element care acceptă o lățime sau înălțime în acest format:
- lățime + umplutură + chenar = lățimea redată sau afișată a casetei elementului.
- înălțime + umplutură + chenar = înălțimea redată sau afișată a casetei elementului.
Aceasta înseamnă că ori de câte ori adăugați padding sau border elementului, dimensiunea unui element va apărea mai mare decât dimensiunea atribuită inițial acestuia. Acest lucru se datorează faptului că conținutul acelui element include width și height proprietăți, dar nu include padding sau border proprietate.
Încă nu îl înțelegi? Uitați-vă la fragmentul de cod de mai jos pentru a vedea calculul real.
.first-box {
width: 200px;
height: 100px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px
Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */
}
.second-box {
width: 200px;
height: 100px;
border: 8px solid blue;
background: yellow;
/* Total width: 200px + (2 * 8px) = 216px
Total height: 100px + (2 * 8px) = 116px */
}
După cum se vede în fragmentul de cod, CSS adaugă fișierul padding și border la width și height deja specificat. Afișează valoarea totală ca dimensiune a elementului, ignorând astfel dimensiunea reală pe care ați atribuit-o fișierului div.
Cu Proprietatea de dimensionare a casetei CSS
Cu box-sizing proprietate, comportamentul implicit explicat mai sus poate fi modificat.
Folosind același cod, să adăugăm box-sizing proprietate și setați-o la border-box și să vedem dacă putem controla efectiv dimensiunea.
Trebuie să fi observat că cei doi div elementele au acum aceeași dimensiune.
Sintaxă
box-sizing:content-box;
box-sizing:border-box;
content-box
Acesta este comportamentul implicit al proprietății box-sizing. content-box nu ia în considerare width și height specificat pentru un element.
Adică, dacă setați un element width la 200 pixeli, apoi setați granița la 8 pixeli și căptușeala la 20 pixeli, dimensiunea border și padding va fi adăugat la lățimea finală redată. Acest lucru face ca elementul să fie mai larg decât 200 pixeli.
div{
box-sizing:content-box;
width: 200px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/
}
După cum se vede în fragmentul de cod de mai sus, dimensiunea acestuia div elementul a crescut automat la 256 px chiar și atunci când a fost setat inițial la 200 px.
frontieră-cutie
Când setați box-sizing proprietate pentru border-box, îi spune browserului să țină cont de orice border și padding atribuit lățimii și înălțimii elementului.
Adică, dacă setați un element width la 200 pixeli, că 200 de pixeli vor include orice margine sau căptușire pe care o adăugați, iar caseta de conținut se va micșora pentru a absorbi acea lățime suplimentară.
div{
box-sizing:border-box;
width: 200px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/
}
După cum se vede în fragmentul de cod de mai sus, dimensiunea acestuia div elementul s-a redus automat la 144 px chiar și atunci când a fost setat inițial la 200 px.
Să combinăm ambele fragmente de cod și să vedem exact cum va arăta caseta content-box și border-box.
Concluzie
Cu proprietatea de dimensionare a casetei CSS, aveți posibilitatea de a seta modul în care sunt calculate dimensiunea elementelor din codul dvs.
In conformitate cu MDN, este adesea util să setați box-sizing la border-box când așezați elemente. Acest lucru face ca gestionarea dimensiunilor elementelor să fie mult mai ușoară și, în general, elimină o serie de capcane pe care le puteți împiedica în timp ce vă expuneți conținutul.
Pe de altă parte, când utilizați position: relative sau position: absolute, folosind box-sizing: content-box permite ca valorile de poziționare să fie relative la conținut și independente de modificările aduse mărimilor de bordură și de umplutură. Uneori ai putea dori asta.
Asta-i tot oameni buni! Sper că acest lucru a fost de ajutor. Dacă da, împărtășiți acest articol și urmați-mă Stare de nervozitate.
