4.1 Eigenschaft box-sizing
Die Eigenschaft box-sizing in CSS ist ein mächtiges Werkzeug zur Verwaltung des Modells zur Größenbestimmung von Elementen. Sie bestimmt, wie die Größen eines Elements berechnet werden, einschließlich Breite und Höhe sowie Innen- und Außenabstände. Im Folgenden schauen wir uns im Detail an, wie box-sizing funktioniert und wie es das Layout einer Webseite beeinflussen kann.
Wesentliche Modelle von box-sizing
Content-box (Inhaltsmodell)
Der Wert content-box ist der Standardwert für alle Elemente. In diesem Modell bestimmen die Größen eines Elements (width und height) nur die Größe des Inhalts, ohne die Innen- und Außenabstände. Das bedeutet, dass Innen- und Außenabstände zur Gesamtbreite und -höhe des Elements hinzugefügt werden.
Border-box (Randmodell)
Der Wert border-box ändert das Größenmodell so, dass die Größen eines Elements (width und height) Innen- und Außenabstände beinhalten. Das bedeutet, dass Innen- und Außenabstände in die Gesamtbreite und -höhe des Elements einfließen, was die Berechnung und Verwaltung der Größe des Elements vereinfacht.
Anwendungsbeispiel für box-sizing:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: Breite und Höhe beinhalten nur den Inhalt.</div>
<div class="box border-box">Border-box: Breite und Höhe beinhalten Innen- und Außenabstände.</div>
Erklärung des Codes:
.box: Basisstil für alle Boxen, einschließlich Innenabstände, Ränder und Größen.content-box: Element mit box-sizing: content-box, bei dem Breite und Höhe nur den Inhalt beinhalten.border-box: Element mit box-sizing: border-box, bei dem Breite und Höhe Innen- und Außenabstände beinhalten
4.2 Einfluss von box-sizing auf das Layout
Inhaltsmodell (Content-box)
Wenn box-sizing: content-box; verwendet wird, werden Innen- und Außenabstände zur Gesamtbreite und -höhe des Elements hinzugefügt. Dies kann eine zusätzliche Berücksichtigung bei der Berechnung der Größen und Platzierung von Elementen erfordern.
Anwendungsbeispiel
In diesem Fall beträgt die Gesamtbreite des Elements 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, und die Gesamthöhe beträgt 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: Breite und Höhe beinhalten nur den Inhalt.</div>
Randmodell (Border-box)
Wenn box-sizing: border-box; verwendet wird, beinhalten die angegebenen Breite und Höhe des Elements die Innen- und Außenabstände. Dies vereinfacht die Berechnung und Verwaltung der Größe des Elements, insbesondere beim Erstellen von responsiven Layouts.
Anwendungsbeispiel:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: Breite und Höhe beinhalten Innen- und Außenabstände.</div>
4.3 Erstellen eines responsiven Layouts
Die Verwendung von box-sizing: border-box; erleichtert die Erstellung responsiver Layouts, da die Größen der Elemente Innen- und Außenabstände beinhalten und unerwartete Überläufe verhindern.
Anwendungsbeispiel:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
<div class="item">Element 3</div>
<div class="item">Element 4</div>
<div class="item">Element 5</div>
<div class="item">Element 6</div>
</div>
Erklärung des Codes:
* { box-sizing: border-box; }: Anwendung des Randmodells auf alle Elemente auf der Seite, um die Verwaltung der Größen zu erleichtern.container: Flex-Container mit einem responsiven Layout.item: Flex-Elemente mit gleichmäßiger Breitenverteilung und Einbeziehung von padding und border in die Gesamtbreite
4.4 Feste Größen mit Innenabständen
Die Verwendung von box-sizing: border-box; ermöglicht es, einfach feste Größen für Elemente mit Innenabständen festzulegen, ohne sich um Überläufe sorgen zu müssen.
Anwendungsbeispiel:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Vertikale Zentrierung des Textes */
}
<div class="fixed-size">
Feste Größen
</div>
Erklärung des Codes:
.fixed-size: Element mit festen Größen von 300x150 Pixeln, einschließlich padding und border, was eine genaue Kontrolle seiner Dimensionen ermöglicht
GO TO FULL VERSION