box-sizing valdo, ką iš tikrųjų matuoja width ir height savybės. Numatyta reikšmė (content-box) matuoja tik turinį; border-box daro juos įskaitant užpildą ir kraštą.
box-sizing valdo, ką iš tikrųjų matuoja width ir height savybės. Numatyta reikšmė (content-box) matuoja tik turinį; border-box daro juos įskaitant užpildą ir kraštą.
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
Su content-box, užpilda ir kraštas yra pridėti prie width, todėl elementas pasirodo platesnis nei nurodytasis skaičius. Tai sulaužo maketą: width: 50% dėžutė su užpilda išeina iš 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Su border-box, width yra galutinis atvaizduotas plotis — užpilda ir kraštas atimami iš vidaus. Nurodytasis skaičius yra gauta dydis, o tai yra daug intuityviau.
*, *::before, *::after {
box-sizing: border-box;
}
Beveik kiekvienas šiuolaikinis stilbėlio lapas, struktūra ir nustatymas iš naujo tai taiko pasauliniu mastu. Tai daro dydžio nustatymą nuspėjamą: width: 50% + užpilda lieka tiksliai 50% ploti, dvi width: 50% dėžutės sėdi greta be per daug, ir kt.
border-box pašalina pačią dažniausią maketavimo matematikos galvos skausmą — mentaliniu būdu turėti pridėti užpildą ir kraštą prie kiekvieno pločio.
Jo nustatymas globaliai laikomas geriausios praktikos numatytu nustatymu, nes "plotis, kurį nustatau, yra plotis, kurį gaunu" yra tas, kaip natūraliai tikitės, kad dydžio nustatymas veiktų.