Mit der CSS-Eigenschaft box-sizing
können wir den Abstand und den Rand einbeziehen die Gesamtbreite und -höhe eines Elements.
Standardmäßig werden Breite und Höhe eines Elements wie folgt berechnet:
Breite + Polsterung + Rand=tatsächliche Breite eines Elements
Höhe + Polsterung + Rand=tatsächliche Höhe eines Elements
Das bedeutet: Wenn Sie die Breite/Höhe eines Elements festlegen, erscheint das Element häufig größer als Sie festgelegt haben (da der Rand und die Polsterung des Elements zur angegebenen Breite/Höhe des Elements hinzugefügt werden).
Die folgende Abbildung zeigt zwei <div>-Elemente mit demselben angegebene Breite und Höhe:
Die beiden <div>-Elemente oben haben im Ergebnis unterschiedliche Größen (weil div2 eine Auffüllung hat angegeben):
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Probieren Sie es selbst aus →
<!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>
Die Eigenschaft box-sizing
löst dieses Problem.
Mit der Eigenschaft box-sizing
können wir den Abstand und den Rand in die Gesamtbreite und -höhe eines Elements einbeziehen.
Wenn Sie box-sizing: border-box;
für ein Element festlegen, werden Abstand und Rand in die Breite und Höhe einbezogen:
Hier ist das gleiche Beispiel wie oben, mit box-sizing: border-box;
zu beiden <div>-Elementen hinzugefügt:
.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;
}
Probieren Sie es selbst aus →
<!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>
Da das Ergebnis der Verwendung von box-sizing: border-box;
viel besser ist, möchten viele Entwickler, dass alle Elemente auf ihren Seiten auf diese Weise funktionieren.
Der folgende Code stellt sicher, dass die Größe aller Elemente auf diese intuitivere Weise angepasst wird. Viele Browser verwenden bereits box-sizing: border-box;
für viele Formularelemente (aber nicht für alle - weshalb Eingaben und Textbereiche bei width: 100 % unterschiedlich aussehen; ).
Dies auf alle Elemente anzuwenden ist sicher und klug:
* {
box-sizing: border-box;
}
Probieren Sie es selbst aus →
<!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>
Definiert, wie die Breite und Höhe eines Elements berechnet werden: sollte Sie enthalten Polsterungen und Ränder oder auch nicht