A box-sizing azt szabályozza, hogy a width és height tulajdonságok valójában mit mérnek. Az alapértelmezett (content-box) csak a tartalmat méri; a az kitöltéshez és kerethez méri.
A box-sizing azt szabályozza, hogy a width és height tulajdonságok valójában mit mérnek. Az alapértelmezett (content-box) csak a tartalmat méri; a az kitöltéshez és kerethez méri.
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! */
A content-box-nál a kitöltés és a keret felül van adva a width-hez, így az elem szélesebb lesz, mint az általad beállított szám. Ez megtöri az elrendezéseket: egy width: 50% doboz kitöltéssel túlcsordul az 50%-áról.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
A border-box-nál a width az utolsó renderelt szélesség — a kitöltés és a keret a belsőből vannak levonva. Az általad beállított szám az a méret, amit kapsz, ami sokkal intuitívabb.
*, *::before, *::after {
box-sizing: border-box;
}
Majdnem minden modern stíluskészlet, keretrendszer és reset ezt globálisan alkalmazza. Ez megjósolható méretezést tesz lehetővé: width: 50% + kitöltés pontosan 50% széles marad, két width: 50% doboz egymás mellett ül felülfolyás nélkül, stb.
A border-box eliminálódik az elrendezés-matematika leggyakoribb forrása — a kitöltés és a keret mentális hozzáadása minden szélességhez.
Globálisan beállítani az ajánlott alapértelmezett módnak tekintik, mert "az a szélesség, amit beállítok, az az a szélesség, amit kapok" az a mód, ahogyan természetesen azt várod, hogy a méretezés működjön.