A CSS box-sizing tulajdonsága lehetővé teszi számunkra, hogy a kitöltést és a keretet egy elem teljes szélessége és magassága.
Alapértelmezés szerint egy elem szélességét és magasságát a rendszer a következőképpen számítja ki:
szélesség + kitöltés + szegély=egy elem tényleges szélessége
magasság + párnázás + szegély=egy elem tényleges magassága
Ez azt jelenti: Amikor beállítja egy elem szélességét/magasságát, az elem gyakran megjelenik nagyobb, mint amennyit beállítottál (mivel az elem szegélye és kitöltése hozzáadódik az elem megadott szélességéhez/magasságához).
A következő ábrán két azonos <div> elem látható meghatározott szélesség és magasság:
A fenti két <div> elem eltérő méretű az eredményben (mert a div2-nek van padding meghatározott):
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Without box-sizing</h1>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>
</html>
A box-sizing tulajdonság megoldja ez a probléma.
A box-sizing tulajdonság lehetővé teszi, hogy a kitöltést és a szegélyt belefoglaljuk egy elem teljes szélességébe és magasságába.
Ha egy elemen beállítja a box-sizing: border-box; elemet, a padding és a keret beleszámít a szélességbe és magasságba:
Itt ugyanaz a példa, mint fent, box-sizing: border-box; mindkét <div> elemhez hozzáadva:
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>With box-sizing</h1>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
Mivel a box-sizing: border-box; használatának eredménye sokkal jobb, sok fejlesztő azt szeretné, ha az oldalakon minden elem így működne.
Az alábbi kód biztosítja, hogy az összes elemet ilyen intuitívabb módon méretezzük. Sok böngésző már használja a box-sizing: border-box;-t sok űrlapelemhez (de nem mindegyikhez - ezért a beviteli és szövegterületek szélessége eltérően néz ki: 100%; ).
Ennek alkalmazása minden elemre biztonságos és bölcs dolog:
* {
box-sizing: border-box;
}Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>
</body>
</html>
Meghatározza az elem szélességének és magasságának kiszámítását: kell tartalmaznak párnázást és szegélyeket, vagy nem