Dimensionare cutie - CSS-Tricks

Anonim

box-sizingProprietatea în CSS controlează modul în care modelul caseta este manipulat pentru elementul care se aplică.

.module ( box-sizing: border-box; )

Unul dintre cele mai comune moduri de utilizare este aplicarea acestuia la toate elementele de pe pagină, inclusiv pseudoelemente:

*, *::before, *::after ( box-sizing: border-box; )

Aceasta este adesea numită „dimensiune universală a cutiei” și este o modalitate bună de a lucra! (Literal) pe care widthîl setați este lățimea pe care o obțineți, fără a fi nevoie să efectuați matematică mentală și să gestionați complexitatea care vine de la lățimile care provin din mai multe proprietăți. Avem chiar o zi de conștientizare a dimensiunii cutiei pe aici.

Valori

  • content-box: implicit. Valorile lățimii și înălțimii se aplică numai conținutului elementului. Căptușeala și marginea sunt adăugate la exteriorul cutiei.
  • padding-box: Valorile lățimii și înălțimii se aplică conținutului elementului și umplerea acestuia. Bordura este adăugată la exteriorul cutiei. În prezent, numai Firefox acceptă această padding-boxvaloare.
  • border-box: Valorile lățimii și înălțimii se aplică conținutului, umpluturii și chenarului.
  • inherit: moștenește dimensiunea casetei elementului părinte.

Exemplu

Acest exemplu de imagine compară valoarea implicită content-box(sus) cu border-box(jos):

Linia roșie dintre imagini reprezintă valoarea lățimii elementelor. Observați că elementul cu valoarea implicită box-sizing: content-box;depășește lățimea declarată atunci când umplutura și chenarul sunt adăugate în exteriorul casetei de conținut, în timp ce elementul cu box-sizing: border-box;aplicația se încadrează complet în lățimea declarată.

Utilizarea dimensiunii cutiei

Să presupunem că ați setat un element la width: 100px; padding: 20px; border: 5px solid black;. În mod implicit, caseta rezultată are o lățime de 150 px. Acest lucru se datorează faptului că modelul implicit de dimensionare a casetei este content-box, care aplică lățimea declarată a unui element numai pentru conținutul său, plasând umplutura și marginea în afara casetei elementului. Acest lucru mărește efectiv cât spațiu ocupă elementul.

Dacă vă schimbați box-sizingla padding-box, capitonarea este împins în interiorul caseta elementului. Apoi, cutia va avea 110 px lățime, cu 20 px de căptușeală în interior și 10 px de chenar în exterior. Dacă doriți să puneți căptușeala și marginea în interiorul cutiei, puteți utiliza border-box. Cutia ar avea apoi o lățime de 100 px - 10 px de margine și 20 px de umplutură sunt ambele împinse în cutia elementului.

Demo

Consultați Compararea stiloului cu valorile dimensiunii casetelor de către CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • width
  • height
  • padding
  • border

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Orice *† 3 * † 1 ‡ 7 * 8 * 2.1 * † Orice *

* padding-boxnu este acceptat

† versiunile mai vechi necesită -webkitprefix (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefix necesar până la versiunea 28, neprefixat de la 29.