Größe von CSS -Boxen
Größe von CSS-Boxen
Die CSS box-sizing-Eigenschaft ermöglicht es uns, die Auffüllung und den Rahmen in die Gesamtbreite und -höhe eines Elements einzubeziehen.
Ohne die CSS-box-sizing-Eigenschaft
Standardmäßig wird die Breite und Höhe eines Elements wie folgt berechnet:
Breite + Polsterung + Rahmen = tatsächliche Breite eines Elements
Höhe + Polsterung + Rahmen = tatsächliche Höhe eines Elements
Das bedeutet: Wenn Sie die Breite/Höhe eines Elements einstellen, erscheint das Element oft größer als Sie es eingestellt haben (weil der Rahmen und die Füllung des Elements zu der angegebenen Breite/Höhe des Elements hinzugefügt werden).
Die folgende Abbildung zeigt zwei <div>-Elemente mit derselben angegebenen Breite und Höhe:
Die beiden obigen <div>-Elemente enden mit unterschiedlichen Größen im Ergebnis (weil für div2 eine Auffüllung angegeben ist):
Beispiel
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Die box-sizingUnterkunft löst dieses Problem.
Mit der CSS-Box-Sizing-Eigenschaft
Die box-sizingEigenschaft ermöglicht es uns, die Polsterung und den Rahmen in die Gesamtbreite und -höhe eines Elements einzubeziehen.
Setzt man box-sizing: border-box;auf ein Element, werden Padding und Border in Breite und Höhe mit eingerechnet:
Hier ist dasselbe Beispiel wie oben, wobei box-sizing: border-box;
beide <div>-Elemente hinzugefügt wurden:
Beispiel
.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;
}
Da das Ergebnis der Verwendung von box-sizing: border-box;so viel besser ist, möchten viele Entwickler, dass alle Elemente auf ihren Seiten so funktionieren.
Der folgende Code stellt sicher, dass alle Elemente auf diese intuitivere Weise dimensioniert werden. Viele Browser verwenden bereits box-sizing: border-box;für viele Formularelemente (aber nicht alle - weshalb Eingaben und Textbereiche unterschiedlich aussehen bei Breite: 100% ;).
Dies auf alle Elemente anzuwenden ist sicher und klug:
Beispiel
* {
box-sizing: border-box;
}
CSS-Box-Größenanpassungseigenschaft
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |