CSS-Eigenschaft box-sizing
Die Eigenschaft box-sizing definiert die Berechnung von width und height eines Elements, wenn sie padding und border einschließen.
Die Eigenschaft box-sizing ist eine der CSS3-Eigenschaften.
Die Breite und Höhe eines Elements werden standardmäßig so berechnet:
- width + padding + border = tatsächliche Breite eines Elements
- height + padding + border = tatsächliche Höhe eines Elements
Wenn also die Breite und Höhe eines Elements definiert sind, erscheint das Element oft größer als festgelegt (weil der Rahmen und der Innenabstand des Elements zur angegebenen Breite und Höhe hinzugefügt werden).
| Initial Value | content-box |
|---|---|
| Applies to | Alle Elemente, die width und height akzeptieren. |
| Inherited | Nein. |
| Animatable | Nein. |
| Version | CSS3 |
| DOM Syntax | object.style.boxSizing = "border-box"; |
Syntax
Syntax der CSS-Eigenschaft box-sizing
box-sizing: content-box | border-box | initial | inherit;In diesem Beispiel werden zwei <div>-Elemente mit derselben angegebenen Breite und Höhe gezeigt:
Beispiel für die Eigenschaft box-sizing:
Beispiel der CSS-Eigenschaft box-sizing mit den Werten content-box und border-box
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
box-sizing: content-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px double #1c87c9;
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px dashed #8ebf42;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<hr />
<h3>box-sizing: content-box (default):</h3>
<div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
<br />
<h3>box-sizing: border-box:</h3>
<div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
</body>
</html>Ergebnis
Wenn box-sizing als content-box definiert ist, ist die gesamte Breite größer als die definierte Breite des div. Und wenn box-sizing: border-box definiert ist, werden padding und border in die Breite und Höhe einbezogen.
Die Eigenschaften box-sizing und border-box werden zum Layouten von Elementen verwendet. Diese Methode ist nützlich, weil sie die Arbeit mit den Größen der Elemente erleichtert, indem sie die Anzahl der Stolperfallen verringert, auf die man beim Anordnen des Inhalts stoßen kann.
Beispiel für die Verwendung der Eigenschaft box-sizing, um zwei nebeneinander definierte umrandete Boxen zu erstellen:
Beispiel der CSS-Eigenschaft box-sizing mit dem Wert border-box
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px double #1c87c9;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 3px solid #ccc;
float: left;
padding: 3px;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<p>Here you can see two bordered boxes defined side by side.</p>
<div class="container">
<div class="box">Left part</div>
<div class="box">Right part</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Werte
| Value | Description |
|---|---|
| content-box | Die Eigenschaften width und height schließen den Inhalt ein, aber padding, border oder margin sind nicht enthalten. Dies ist der Standardwert. |
| border-box | Die Eigenschaften width und height schließen content, padding und border ein, aber nicht den margin. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Übernimmt die Eigenschaft vom übergeordneten Element. |
Practice
What does the CSS 'box-sizing' property do?