The CSS Podcast – 001: The Box Model
Nehmen wir an, Sie haben diese HTML-Version:
<p>I am a paragraph of text that has a few words in it.</p>
Dann schreiben Sie diesen CSS-Code dafür:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Der Inhalt wird dann anstelle der von Ihnen angegebenen 100 Pixel 142 Pixel breit, und bricht aus dem Element heraus. Why is that?
Das Box-Modell ist eine zentrale Grundlage von CSS. Wenn Sie wissen, wie das Boxmodell funktioniert, wie es von anderen CSS-Aspekten beeinflusst wird und vor allem, wie Sie es steuern können, können Sie besser vorhersehbaren CSS-Code schreiben.
Alles, was von CSS angezeigt wird, ist ein Feld, auch wenn es nur Text enthält oder ein border-radius enthält, das wie ein Kreis aussieht.
Inhalt und Größe
Felder verhalten sich je nach ihrem display-Wert, ihren festgelegten Abmessungen und dem Inhalt, den sie enthalten, unterschiedlich. Dieser Inhalt kann Nur-Text oder mehr durch untergeordnete Elemente
generierte Felder sein. In beiden Fällen wirkt sich der Inhalt standardmäßig
auf die Größe des Felds aus.
Sie können dies mithilfe der externen Größenanpassung steuern oder die intrinsische Größe verwenden, damit der Browser anhand der Inhaltsgröße Entscheidungen für Sie trifft.
Hier ist eine einfache Demo, die den Unterschied erklärt:
Die Demo enthält die Worte „CSS ist fantastisch“ in einem Feld mit festen Abmessungen und einem breiten Rahmen. Da das Feld eine bestimmte Breite hat, hat es eine externe Größe.
Das bedeutet, dass die Größe der untergeordneten Inhalte festgelegt wird. Das Wort "awesome" ist jedoch zu groß für das Feld, sodass es außerhalb des Rahmenfelds des übergeordneten Feldes überläuft (mehr dazu später). Eine Möglichkeit, diesen Überlauf zu verhindern, besteht darin, die Größe des Felds zu ändern, indem Sie entweder die Breite nicht festlegen oder in diesem Fall width auf min-content setzen. Mit dem Schlüsselwort min-content wird festgelegt, dass das Feld nur so breit ist wie die eigentliche Mindestbreite des Inhalts (das Wort „toll“). Dadurch passt das Feld perfekt um den Text.
Hier ist ein komplexeres Beispiel, das die Auswirkungen unterschiedlicher Größen auf echte Inhalte veranschaulicht:
Aktivieren und deaktivieren Sie die interne Größenanpassung, um zu sehen, wie Sie mit der externen Größenanpassung mehr Kontrolle haben. Mit der systeminternen Größenanpassung erhalten Sie mehr Kontrolle. Fügen Sie der Karte einige Sätze hinzu, um die Effekte zu sehen. Wenn dieses Element eine externe Größe hat, gibt es ein Limit dafür, wie viel Inhalt Sie hinzufügen können, bevor es überläuft. Dies ist jedoch nicht der Fall, wenn die systeminterne Größenanpassung aktiviert ist.
Standardmäßig hat dieses Element jeweils einen width und einen height von 400px.
Diese Dimensionen geben strikte Grenzen für alles innerhalb des Elements vor, die berücksichtigt werden, es sei denn, der Inhalt ist zu groß für die Box. Sie können dies in Aktion sehen, indem Sie die Bildunterschrift unter dem Blumenbild in einen Wert ändern, der die Höhe der Box übersteigt.
Schlüsselbegriff: Überlauf entsteht, wenn Inhalte zu groß für das Feld sind, in dem sie sich befinden. Mit dem Attribut overflow können Sie festlegen, wie ein Element mit Überlaufinhalten umgehen soll.
Wenn Sie zur internen Größe wechseln, kann der Browser anhand der Inhaltsgröße des Felds Entscheidungen für Sie treffen. Das Überlauf wird dadurch deutlich unwahrscheinlicher, da sich die Größe des Felds mit seinem Inhalt anpasst.
Es ist wichtig zu beachten, dass die intrinsische Größenanpassung das Standardverhalten des Browsers ist und in der Regel viel mehr Flexibilität bietet als eine externe Größenanpassung.
Die Bereiche des Boxmodells
Boxen bestehen aus unterschiedlichen Boxmodellbereichen, die alle eine bestimmte Aufgabe erfüllen.
Das Inhaltsfeld ist der Bereich, in dem sich die Inhalte befinden. Über den Inhalt lässt sich die Größe des übergeordneten Bereichs festlegen, d. h., dies ist in der Regel der Bereich mit der größten unterschiedlichen Größe.
Das Padding-Feld umgibt das Inhaltsfeld. Es handelt sich dabei um den Bereich, der von der padding-Eigenschaft erstellt wird.
Da sich der Innenrand innerhalb des Felds befindet, ist der Hintergrund der Box in dem dadurch entstehenden Raum sichtbar.
Wenn für das Feld Überlaufregeln wie overflow: auto oder overflow: scroll festgelegt sind, nehmen auch die Bildlaufleisten diesen Bereich ein.
Der Rahmenrahmen umgibt den Rahmen. Der Abstand wird durch den Wert border definiert, der einen visuellen Rahmen für das Element erstellt. Der Rahmenrand des Elements beschränkt den sichtbaren Bereich.
Der letzte Bereich, das Randfeld, ist der Abstand um das Rechteck, der von der margin-Regel des Kästchens definiert wird. Eigenschaften wie outline und box-shadow nehmen ebenfalls diesen Raum ein, weil sie über das Element gezeichnet werden und keinen Einfluss auf die Größe der Box haben. Wenn Sie den outline-width des Kästchens von 200px für ein Feld ändern, ändert sich innerhalb des Rahmenrands nichts.
Eine nützliche Analogie
Das Boxmodell ist komplex zu verstehen. Hier ist eine Analogie zu dem, was Sie bisher gelernt haben.
In diesem Diagramm sind drei Bilderrahmen nebeneinander an einer Wand montiert. Die Elemente des gerahmten Bilds entsprechen dem Boxmodell wie folgt:
- Das Inhaltsfeld ist das Artwork.
- Der Rahmen ist die weiße Wandhalterung zwischen Rahmen und Artwork.
- Das Rahmenfeld ist der Rahmen, der als Rahmen für das Artwork dient.
- Das Randfeld ist der Abstand zwischen den Frames.
- Der Schatten nimmt denselben Platz ein wie das Randfeld.
Fehler im Boxmodell beheben
Browser-Entwicklertools bieten eine Visualisierung der Boxmodellberechnungen eines ausgewählten Felds, die Ihnen helfen kann, zu verstehen, wie das Boxmodell funktioniert und wie es sich auf die Website auswirkt, an der Sie arbeiten.
Probieren Sie dies in Ihrem eigenen Browser aus:
- Öffnen Sie die Entwicklertools.
- Wählen Sie ein Element aus.
- Debugger für Boxmodellen anzeigen.
Steuerung des Boxmodells
Um zu verstehen, wie das Boxmodell gesteuert wird, müssen Sie zuerst verstehen, was in Ihrem Browser passiert.
Jeder Browser wendet ein User-Agent-Stylesheet auf HTML-Dokumente an, in dem festgelegt wird, wie Elemente aussehen und funktionieren sollen, wenn kein CSS definiert ist. Der CSS-Code in User-Agent-Stylesheets variiert je nach Browser, bietet jedoch sinnvolle Standardwerte, um die Lesbarkeit von Inhalten zu verbessern.
Eine Eigenschaft des User-Agent-Stylesheets legt den standardmäßigen display eines Felds fest. Bei einem normalen Ablauf lautet der Standardwert für display eines <div>-Elements beispielsweise block, ein <li> hat den Standardwert display von list-item und ein <span> hat einen standardmäßigen display-Wert von inline.
Ein inline-Element hat einen Blockrand, der von anderen Elementen nicht berücksichtigt wird.
Bei inline-block berücksichtigen andere Elemente den Blockrand, aber das erste Element behält größtenteils die gleiche Funktionsweise wie das inline-Element bei.
Ein block-Element füllt standardmäßig den verfügbaren Inline-Bereich aus, während inline- und inline-block-Elemente nur so groß wie ihr Inhalt sind.
Das User-Agent-Stylesheet legt auch box-sizing fest. Dadurch wird festgelegt, wie ein Feld seine Boxgröße berechnen soll. Standardmäßig haben alle Elemente den folgenden User-Agent-Stil: box-sizing: content-box;. Wenn Sie also Dimensionen wie width oder height festlegen, gelten diese für das Inhaltsfeld. Wenn Sie dann padding und border festlegen, werden diese Werte der Größe des Inhaltsfelds hinzugefügt.
Wissen testen
Testen Sie Ihr Wissen über die Auswirkungen der Boxmodellgröße auf Eigenschaften.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
Wie breit wird .my-box wohl sein?
200px wäre richtig, wenn das Feld box-sizing: border-box hätte.
Die tatsächliche Breite dieses Felds beträgt 260 Pixel.
Da der CSS-Code die Standardeinstellung box-sizing: content-box verwendet, entspricht die angewendete Breite der Breite des Inhalts. Dabei werden padding und border auf beiden Seiten hinzugefügt. 200 Pixel für den Inhalt + 40 Pixel Abstand und 20 Pixel des Rahmens ergeben eine Gesamtbreite von 260 Pixeln.
Sie können dies ändern, indem Sie die Größe border-box angeben:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Dieses alternative Boxmodell weist CSS an, width auf das Rahmenfeld statt auf das Inhaltsfeld anzuwenden. Das bedeutet, dass border und padding eingereicht werden. Wenn Sie also .my-box auf die Breite von 200px festlegen, wird sie tatsächlich in der Breite von 200px gerendert.
In der folgenden interaktiven Demo sehen Sie, wie das funktioniert. Wenn Sie den Wert box-sizing ein-/ausschalten, wird im blauen Bereich angezeigt, welches CSS innerhalb des Felds angewendet wird.
*,
*::before,
*::after {
box-sizing: border-box;
}
Diese CSS-Regel wählt jedes Element im Dokument sowie jedes ::before- und ::after-Pseudoelement aus und wendet box-sizing: border-box an.
Das bedeutet, dass jetzt jedes Element dieses alternative Boxmodell verwendet.
Da das alternative Boxmodell vorhersehbarer sein kann, fügen Entwickler diese Regel häufig für Zurücksetzen und Normalizer wie diese hinzu.