box-sizing hallitsee mitä width ja height ominaisuudet todella mittaavat. Oletusarvo (content-box) mittaa vain sisältöä; tekee niistä sisältäväksi täytettä ja reunusta.
box-sizing hallitsee mitä width ja height ominaisuudet todella mittaavat. Oletusarvo (content-box) mittaa vain sisältöä; tekee niistä sisältäväksi täytettä ja reunusta.
border-box.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! */
content-box:in kanssa täyte ja reuna lisätään width:n päälle, joten elementti päätyy leveämmäksi kuin numero, jonka asetsit. Tämä rikkoo asettelut: width: 50% -ruutu täytteellä ylitäyttää sen 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box:in kanssa width on lopullinen renderöity leveys — täyte ja reuna vähennetään sisältä. Numero, jonka asetat, on koko, jonka saat, mikä on paljon intuitiivisempi.
*, *::before, *::after {
box-sizing: border-box;
}
Skeemasit lähes kaikki modernit tyylipohjat, puitteet ja nollaukset soveltavat tätä globaalisti. Se tekee kokoon muuttamisesta ennustettavaa: width: 50% + täyte pysyy tarkalleen 50% leveänä, kaksi width: 50% -ruutua istuu vierekkäin ilman ylivuotoa jne.
border-box poistaa yksittäisen yleisimmän asettelun matematiikan päänsäryn lähteen — joutua henkisesti lisäämään täyte ja reuna jokaiseen leveyteen.
Sen asettaminen globaalisti katsotaan parhaaksi käytännön oletukseksi, koska "leveys, jonka asetan, on leveys, jonka saan" on se, kuinka luonnollisesti odotat koon muuttamisen toimivan.