Block- und Inline-Layout im normalen Fluss

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

In einem vertikalen Schreibmodus dann würden sie sich horizontal anordnen.

In diesem Leitfaden werden wir auf Englisch arbeiten 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 die Abstände zwischen zwei Blockboxen das, was die Trennung zwischen den Elementen schafft. Wir können dies mit dem Layout von zwei Absätzen sehen, denen ich einen Rand hinzugefügt habe. Das Standard-Browser-Stylesheet fügt den Absätzen durch Hinzufügen eines Abstands nach oben und unten einen Abstand 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, dann werden die Ränder sich berühren.

<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 werden Block-Elemente den gesamten Platz in der Inline-Richtung einnehmen, sodass sich unsere Absätze ausbreiten und so groß wie möglich innerhalb ihres umschließenden Blocks werden. Wenn wir ihnen eine Breite geben, werden sie weiterhin eins unter dem anderen angeordnet, selbst wenn es Platz gäbe, damit sie nebeneinander stehen. Jeder beginnt an der Startkante des umschließenden Blocks, also dem Punkt, an dem 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 Ränder zwischen Block-Elementen kollabieren. Das bedeutet, dass wenn Sie ein Element mit einem oberen Rand direkt nach einem Element mit einem unteren Rand haben, anstatt dass der gesamte Raum die Summe dieser beiden Ränder ist, der Rand kollabiert und damit so groß wie der größere der beiden Ränder wird.

Im folgenden Beispiel haben die Absätze einen oberen Rand von 20px und einen unteren Rand von 40px. Die Größe des Randes zwischen den Absätzen beträgt 40px, da der kleinere obere Rand des zweiten Absatzes mit dem größeren unteren Rand des ersten Absatzes kollabiert 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 Ränder-Kollaps in unserem Artikel Mastering Margin Collapsing lesen.

Inline-Elemente werden nacheinander in der Richtung angezeigt, in der Sätze in diesem bestimmten Schreibmodus laufen. Während wir normalerweise nicht dazu neigen, Inline-Elemente als Boxen wahrzunehmen, haben sie, wie alles in CSS, Boxen. Diese Inline-Boxen sind nacheinander angeordnet. Wenn im umschließenden Block nicht genug Platz für alle Boxen ist, kann eine Box auf eine neue Zeile umgebrochen werden. Die erstellten Zeilen werden als Zeilenboxen 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 wurden, um sicherzustellen, dass alles in einer Box verpackt ist, aber solche, die wir nicht direkt anvisieren können.

Die Größe der Zeilenbox in der Blockrichtung (also die Höhe beim Arbeiten auf Englisch) wird durch die höchste Box innerhalb davon definiert. Im nächsten Beispiel ist das <strong> Element 300%; da dieser Inhalt sich über zwei Zeilen erstreckt, definiert es jetzt die Höhe der Zeilenboxen dieser beiden 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 in unserem Leitfaden zum visuellen Formatierungsmodell verhalten.

Zusätzlich zu den in CSS2.1 existierenden Regeln beschreiben neue Ebenen von CSS weiter das Verhalten von Block- und Inline-Boxen. Die display-Eigenschaft definiert, wie sich eine Box und alle Boxen innerhalb davon verhalten. In der CSS Display Model Level 3 können wir mehr darüber erfahren, wie die display-Eigenschaft das Verhalten von Boxen und den von ihnen generierten Boxen verändert.

Der Anzeigentyp eines Elements definiert den äußeren Anzeigentyp; dieser bestimmt, wie die Box neben anderen Elementen im gleichen Formatierungskontext angezeigt wird. Es definiert auch den inneren Anzeigentyp, der bestimmt, wie sich Boxen innerhalb dieses Elements verhalten. Wir können dies sehr deutlich sehen, wenn wir ein Flex-Layout betrachten. Im folgenden Beispiel habe ich ein <div>, das ich mit display: flex versehen habe. Der Flex-Container verhält sich wie ein Block-Element: Er wird in einer neuen Zeile angezeigt und nimmt den gesamten Platz ein, den er in der Inline-Richtung kann. Dies ist der äußere Anzeigentyp von block.

Die Flex-Elemente jedoch nehmen an einem Flex-Formatierungskontext teil, weil ihr Elternteil das Element mit display: flex ist, das einen inneren Anzeigentyp von flex hat und den Flex-Formatierungskontext für die direkten Kinder festlegt.

<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 denken, dass jede Box in CSS auf diese Weise funktioniert. Die Box selbst hat einen äußeren Anzeigentyp, sodass sie weiß, wie sie neben anderen Boxen zu verhalten ist. Sie hat dann einen inneren Anzeigentyp, der die Art und Weise ändert, wie sich ihre Kinder verhalten. Diese Kinder haben dann auch einen äußeren und inneren Anzeigentyp. Die Flex-Elemente im vorherigen Beispiel werden zu Flex-Level-Boxen, sodass ihr äußerer Anzeigentyp durch die Teilnahme am Flex-Formatierungskontext bestimmt wird. Sie haben jedoch einen inneren Anzeigentyp von flow, was bedeutet, dass ihre Kinder am normalen Fluss teilnehmen. Elemente, die innerhalb unseres Flex-Elements verschachtelt sind, legen sich als Block- und Inline-Elemente aus, es sei denn, etwas ändert ihren Anzeigentyp.

Dieses Konzept des äußeren und inneren Anzeigentyps ist wichtig, da es uns sagt, dass ein Container, der eine Layout-Methode wie Flexbox (display: flex) und Grid-Layout (display: grid) verwendet, weiterhin an Block- und Inline-Layout teilnimmt, da der äußere Anzeigentyp dieser Methoden block ist.

Browser zeigen Elemente in Block- oder Inline-Formatierungskontexten basierend auf dem an, was normalerweise für dieses Element sinnvoll ist. Zum Beispiel wird ein <strong>-Element verwendet, um einen Inhalt stark zu betonen und wird standardmäßig in Browsern fett angezeigt. Es würde normalerweise keinen Sinn machen, dass dieses <strong>-Element als Block-Level-Element angezeigt wird, das in eine neue Zeile umbricht. Wenn Sie jedoch alle <strong>-Elemente als Block-Boxen anzeigen möchten, könnten Sie dies tun, indem Sie strong { display: block; } festlegen. Die Möglichkeit, Inhalte mit CSS zu gestalten, bedeutet, dass Sie immer die geeignetsten semantischen HTML-Elemente verwenden können, um Ihren Inhalt 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 ganz ohne CSS-Styling auf eine lesbare Weise angezeigt. Indem Sie verstehen, wie der normale Fluss funktioniert, wird Ihnen das Layouten einfacher fallen, da Sie den Ausgangspunkt verstehen, um Veränderungen daran vorzunehmen, wie Elemente angezeigt werden.

• CSS-Grundboxmodell
• Lernen: Normaler Fluss
• Inhalt auf Inline-Ebene
• Inhalt auf Block-Ebene