Block- und Inline-Layout im normalen Fluss

Block-Elemente in einem horizontalen Schreibmodus wie Englisch, werden vertikal, eines unter dem anderen angeordnet.

In einem vertikalen Schreibmodus würden sie dann horizontal angeordnet.

In diesem Leitfaden arbeiten wir in Englisch und daher in einem horizontalen Schreibmodus. Alles Beschriebene sollte jedoch auf die gleiche Weise funktionieren, wenn Ihr Dokument in einem vertikalen Schreibmodus ist.

Wie in der Spezifikation definiert, sind es die Abstände zwischen zwei Block-Boxen, die eine Trennung zwischen den Elementen schaffen. Wir können dies mit dem Layout von zwei Absätzen sehen, denen ich eine Umrandung hinzugefügt habe. Das standardmäßige Browser-Stylesheet fügt durch Hinzufügen eines Abstandes zum oberen und unteren Rand der Absätze eine Trennung zwischen den Absätzen hinzu.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, 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>
</div>

p {
  border: 2px solid green;
}

Wenn wir die Abstände auf dem Absatz-Element auf 0 setzen, berühren sich die Umrandungen.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, 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>
</div>

p {
  border: 2px solid green;
  margin: 0;
}

Standardmäßig nutzen Block-Elemente den gesamten Platz in der Inline-Richtung, sodass unsere Absätze sich ausbreiten und so groß wie möglich innerhalb ihres umgebenden Blocks werden. Wenn wir ihnen eine Breite geben, werden sie weiterhin übereinander angeordnet, selbst wenn Platz wäre, um sie nebeneinander zu platzieren. Jedes wird am Startkante des umgebenden Blocks beginnen, also an der Stelle, an der normalerweise die Sätze in diesem Schreibmodus beginnen würden.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, 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>
</div>

p {
  border: 2px solid green;
  width: 40%;
}

Die Spezifikation erklärt, dass Abstände zwischen Block-Elementen zusammenfallen. Das bedeutet, dass wenn Sie ein Element mit einem oberen Abstand direkt nach einem Element mit einem unteren Abstand haben, statt dass der gesamte Raum die Summe dieser beiden Abstände ist, der Abstand zusammenfällt und im Wesentlichen so groß wie der größere der beiden Abstände wird.

Im folgenden Beispiel haben die Absätze einen oberen Abstand von 20px und einen unteren von 40px. Die Größe des Abstandes zwischen den Absätzen beträgt 40px, da der kleinere obere Abstand des zweiten Absatzes mit dem größeren unteren Abstand des ersten zusammengefallen ist.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, 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>
</div>

p {
  border: 2px solid green;
  margin: 20px 0 40px 0;
}

Sie können mehr über das Zusammenfallen von Abständen in unserem Artikel Beherrschung von zusammenfallenden Abständen lesen.

Inline-Elemente werden eines nach dem anderen in der Richtung angezeigt, in die Sätze in diesem speziellen Schreibmodus verlaufen. Während wir normalerweise nicht dazu neigen, bei Inline-Elementen an eine Box zu denken, haben sie wie alles in CSS eine solche. Diese Inline-Boxen werden nacheinander angeordnet. Gibt es nicht genug Platz im umgebenden Block für alle Boxen, kann eine Box auf eine neue Linie umgebrochen werden. Die erstellten Linien werden als Linienboxen bezeichnet.

Im folgenden Beispiel haben wir drei Inline-Boxen, die durch einen Absatz mit einem <strong>-Element darin erstellt wurden.

<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>

Die Boxen um die Wörter vor dem <strong>-Element und nach dem </strong>-Element werden als anonyme Boxen bezeichnet, Boxen, die eingeführt werden, um sicherzustellen, dass alles in einer Box verpackt ist, aber solche, die wir nicht direkt ansprechen können.

Die Größe der Linienbox in der Block-Richtung (also die Höhe bei Arbeiten in Englisch) wird durch die höchste Box in ihr definiert. Im nächsten Beispiel ist das <strong>-Element 300%; da sich dieser Inhalt über zwei Zeilen erstreckt, definiert es jetzt die Höhe der Linienboxen dieser zwei Zeilen.

<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>

strong {
  font-size: 300%;
}

Erfahren Sie mehr darüber, wie sich Block- und Inline-Boxen verhalten, in unserem Leitfaden zum visuellen Formatierungsmodell.

Zusätzlich zu den in CSS 2.1 existierenden Regeln beschreiben neue Stufen von CSS das Verhalten von Block- und Inline-Boxen weiter. Die display-Eigenschaft definiert, wie eine Box und jede Box in ihr sich verhält. Im CSS-Anzeigemodell Stufe 3 können wir mehr darüber erfahren, wie die display-Eigenschaft das Verhalten von Boxen und den Boxen, die sie erzeugen, ändert.

Der Anzeige-Typ eines Elements definiert den äußeren Anzeige-Typ; dies diktiert, wie die Box neben anderen Elementen im selben Formatierungskontext angezeigt wird. Es definiert auch den inneren Anzeige-Typ, der bestimmt, wie Boxen in diesem Element sich verhalten. Dies wird sehr deutlich, wenn man ein flexibles Layout betrachtet. Im unten stehenden Beispiel habe ich einen <div>, dem ich display: flex gegeben habe. Das Flex-Container verhält sich wie ein Block-Element: Es wird in einer neuen Zeile angezeigt und nimmt den gesamten Platz ein, den es in der Inline-Richtung einnehmen kann. Dies ist der äußere Anzeige-Typ von block.

Die Flex-Elemente hingegen nehmen an einem Flex-Formatierungskontext teil, weil ihr übergeordnetes Element das Element mit display: flex ist, welches einen inneren Anzeige-Typ von flex hat und den Flex-Formatierungskontext für die direkten Kinder etabliert.

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
  <div>
    <div>Children</div>
    <div>are in</div>
    <div>normal flow</div>
  </div>
</div>

.container {
  display: flex;
}

.container > * {
  border: 1px solid green;
}

Daher können Sie sich jedes Boxen in CSS, das auf diese Weise arbeitet, vorstellen. Die Box selbst hat einen äußeren Anzeige-Typ, so dass sie weiß, wie sie sich neben anderen Boxen verhält. Dann hat sie einen inneren Anzeige-Typ, der verändert, wie ihre Kinder sich verhalten. Diese Kinder haben dann auch einen äußeren und inneren Anzeige-Typ. Die Flex-Elemente im vorherigen Beispiel werden zu Flex-Level-Boxen, so dass ihr äußerer Anzeige-Typ durch die Art und Weise bestimmt wird, dass sie Teil des Flex-Formatierungskontexts sind. Sie haben jedoch einen inneren Anzeige-Typ von Fluss, was bedeutet, dass ihre Kinder am normalen Fluss teilnehmen. In den Flex-Elementen verschachtelte Elemente legen sich als Block- und Inline-Elemente aus, es sei denn, etwas ändert ihren Anzeige-Typ.

Dieses Konzept des äußeren und inneren Anzeige-Typs ist wichtig, da es uns sagt, dass ein Container, der eine Layoutmethode wie flexbox (display: flex) und Raster-Layout (display: grid) verwendet, immer noch an Block- und Inline-Layout teilnimmt, da der äußere Anzeige-Typ dieser Methoden block ist.

Browser zeigen Elemente in Block- oder Inline-Formatierungskontexten basierend darauf an, was normalerweise für dieses Element sinnvoll ist. Zum Beispiel wird ein <strong>-Element verwendet, um einen Inhaltsteil stark zu betonen und wird standardmäßig fett in Browsern angezeigt. Es würde allgemein keinen Sinn machen, dass dieses <strong>-Element als Block-Level-Element angezeigt wird, das in eine neue Zeile umbricht. Wenn Sie jedoch möchten, dass alle <strong>-Elemente als Block-Box angezeigt werden, könnten Sie dies tun, indem Sie strong { display: block; } setzen. Die Fähigkeit, Inhalte mit CSS zu stylen, bedeutet, dass Sie immer die am besten geeigneten semantischen HTML-Elemente verwenden können, um Ihre Inhalte zu kennzeichnen und dann ändern, wie sie mit CSS angezeigt 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>

strong {
  display: block;
}

In diesem Leitfaden haben wir uns angesehen, wie Elemente im normalen Fluss als Block- und Inline-Elemente angezeigt werden. Aufgrund des Standardverhaltens dieser Elemente wird ein HTML-Dokument ohne jegliche CSS-Stilgebung auf eine lesbare Weise angezeigt. Durch das Verständnis, wie der normale Fluss funktioniert, wird Ihnen das Layout leichter fallen, da Sie den Ausgangspunkt verstehen, um Änderungen an der Anzeige der Elemente vorzunehmen.

• CSS-Grundlegendes Box-Modell
• Lernen: Normaler Fluss
• Inline-Level-Elemente
• Block-Level-Elemente