Einführung in Formatierungskontexte
Dieser Artikel führt in das Konzept der Formatierungskontexte ein, von denen es mehrere Typen gibt, einschlieÃlich Blockformatierungskontexte, Inline-Formatierungskontexte und Flex-Formatierungskontexte. Die Grundlagen, wie sie sich verhalten und wie Sie diese Verhaltensweisen nutzen können, werden ebenfalls eingeführt.
Alles auf einer Seite ist Teil eines Formatierungskontextes oder eines Bereichs, der definiert wurde, um Inhalte auf eine bestimmte Weise darzustellen. Ein Blockformatierungskontext (BFC) ordnet Kind-Elemente gemäà den Block-Layout-Regeln an, ein Flex-Formatierungskontext ordnet seine Kinder als flex items an, usw. Jeder Formatierungskontext hat spezifische Regeln darüber, wie das Layout in diesem Kontext funktioniert.
Blockformatierungskontexte
Das äuÃerste Element in einem Dokument, das Blocklayoutregeln verwendet, etabliert den ersten oder initialen Blockformatierungskontext. Das bedeutet, dass jedes Element innerhalb des Blocks des <html>-Elements gemäà dem normalen Fluss entsprechend den Regeln für Block- und Inline-Layout ausgelegt wird. Elemente, die an einem BFC teilnehmen, verwenden die im CSS-Boxmodell beschriebenen Regeln, die definieren, wie die Ränder, Rahmen und Abstände eines Elements mit anderen Blöcken im selben Kontext interagieren.
Erstellen eines neuen Blockformatierungskontextes
Das <html>-Element ist nicht das einzige Element, das einen Blockformatierungskontext erstellen kann. Jedes Block-Element kann durch Anwendung bestimmter CSS-Eigenschaften dazu gebracht werden, einen BFC zu erzeugen.
Ein neuer BFC wird in den folgenden Situationen erstellt:
- Elemente, die mit
floatzum Schweben gebracht werden - absolut positionierte Elemente
- Elemente mit
display: inline-block - Tabellenzellen oder Elemente mit
display: table-cell, einschlieÃlich anonymer Tabellenzellen, die bei Verwendung derdisplay: table-*-Eigenschaften erstellt werden - Tabellenbeschriftungen oder Elemente mit
display: table-caption - Blockelemente, bei denen
overfloweinen anderen Wert alsvisiblehat - Elemente mit
display: flow-rootoderdisplay: flow-root list-item - Elemente mit
contain: layout,contentoderstrict - Abfragecontainer (Elemente, bei denen
container-typenichtnormalist) - flex items
- Grid-Items
- mehrspaltige Container
- Elemente mit
column-spanaufallgesetzt
Dies ist nützlich, weil ein neuer BFC sich ähnlich verhält wie das äuÃerste Dokument, indem er zu einem Mini-Layout im Hauptlayout wird. Ein BFC enthält alles darin, float und clear gelten nur für Elemente im selben Formatierungskontext, und Ränder kollabieren nur zwischen Elementen im selben Kontext.
BFC-Erstellung Beispiele
Schauen wir uns ein paar dieser Situationen an, um den Effekt der Erstellung eines neuen BFCs zu sehen.
Im nachstehenden Beispiel haben wir ein schwebendes Element in einem <div> mit einem angewendeten Rahmen. Der Inhalt dieses <div> ist neben das schwebende Element geflossen. Da der Inhalt des Schwebens höher ist als der Inhalt daneben, verläuft der Rahmen des <div> nun durch das Schweben. Wie im Leitfaden zu im Fluss und auÃerhalb des Flusses stehenden Elementen erklärt, wurde das Schweben aus dem Fluss genommen, sodass der Hintergrund und der Rahmen des Divs nur den Inhalt und nicht das Schweben enthalten.
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 100px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
Ein neuer BFC würde das Schweben einschlieÃen. Eine übliche Methode in der Vergangenheit bestand darin, overflow: auto festzulegen oder andere Werte als den Anfangswert von overflow: visible zu setzen.
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
overflow: auto;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
Durch das Festlegen von overflow: auto wurde ein neuer BFC erstellt, der das Schweben einschlieÃt. Unser <div> wird nun zu einem Mini-Layout innerhalb unseres Layouts. Jedes Kind-Element wird darin enthalten sein.
Das Problem bei der Verwendung von overflow zur Erstellung eines neuen BFC besteht darin, dass die overflow-Eigenschaft dazu gedacht ist, dem Browser mitzuteilen, wie Sie mit überflieÃendem Inhalt umgehen möchten. In einigen Fällen kann es vorkommen, dass Sie unerwünschte Scrollleisten oder abgeschnittene Schatten erhalten, wenn Sie diese Eigenschaft rein zur Erstellung eines BFC verwenden. Darüber hinaus ist es möglicherweise für einen zukünftigen Entwickler nicht sehr lesbar, da es möglicherweise nicht offensichtlich ist, warum Sie overflow für diesen Zweck verwendet haben. Wenn Sie dies tun, wäre es eine gute Idee, den Code zu kommentieren, um zu erklären.
Explizite Erstellung eines BFC mit display: flow-root
Die Verwendung von display: flow-root (oder display: flow-root list-item) auf dem umschlieÃenden Block erstellt einen neuen BFC ohne andere potenziell problematische Nebeneffekte.
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
display: flow-root;
}
Mit display: flow-root auf dem <div> nimmt alles innerhalb dieses Containers am Blockformatierungskontext dieses Containers teil, und schwebende Elemente ragen nicht aus dem Boden des Elements heraus.
Der Name des flow-root-Schlüsselworts bezieht sich darauf, dass Sie etwas schaffen, das im Wesentlichen wie ein neues Wurzelelement dient (wie es das <html> tut), angesichts der Art und Weise, wie der neue Kontext erstellt wird und seine Fluss-Layout-Funktionen.
Inline-Formatierungskontexte
Inline-Formatierungskontexte existieren innerhalb anderer Formatierungskontexte und können als Kontext eines Absatzes betrachtet werden. Der Absatz erstellt einen Inline-Formatierungskontext, in dem solche Dinge wie <strong>, <a> oder <span>-Elemente auf Text angewendet werden.
Das Boxmodell gilt nicht vollständig für Elemente, die an einem Inline-Formatierungskontext teilnehmen. In einer horizontalen Schreibmoduslinie werden horizontale Abstände, Rahmen und Rand auf das Element angewendet und drücken den Text nach links und rechts. Rand oberhalb und unterhalb des Elements wird jedoch nicht angewendet. Vertikaler Abstand und Rahmen werden angewendet, können jedoch Inhalte überlappen, da in einem Inline-Formatierungskontext die Linienkästen nicht durch Abstand und Rahmen auseinander gedrängt werden.
<p>
Before that nightâ<strong>a memorable night</strong>, as it was to
proveâhundreds of millions of people had watched the rising smoke-wreaths of
their fires without drawing any special inspiration from the fact.
</p>
body {
font: 1.2em sans-serif;
}
p {
margin-top: 2em;
}
strong {
margin: 20px;
padding: 20px;
border: 5px solid rebeccapurple;
}
Andere Formatierungskontexte
Dieser Leitfaden behandelt das Fluss-Layout und bezieht sich daher nicht auf andere mögliche Formatierungskontexte. Daher ist es nützlich zu wissen, dass das Erstellen eines beliebigen Formatierungskontextes das Verhalten der darin enthaltenen Elemente ändert. Dieses Verhalten wird immer in der Spezifikation und auch hier auf MDN beschrieben.
Zusammenfassung
In diesem Leitfaden haben wir uns detaillierter mit den Block- und Inline-Formatierungskontexten und dem wichtigen Thema der Erstellung eines Blockformatierungskontextes (BFC) befasst. Im nächsten Leitfaden werden wir herausfinden, wie der normale Fluss mit verschiedenen Schreibmodi interagiert.