Einführung in das CSS-Layout

Normale Layoutfluss

Elemente auf einer Webseite werden im normalen Fluss angeordnet, wenn Sie kein CSS angewendet haben, um ihr Verhalten zu ändern. Sie können das Verhalten von Elementen ändern, indem Sie entweder ihre Position im normalen Fluss anpassen oder sie ganz daraus entfernen. Mit einem soliden, gut strukturierten Dokument zu beginnen, das im normalen Fluss lesbar ist, ist der beste Weg, um jede Webseite zu starten. Es stellt sicher, dass Ihre Inhalte lesbar sind, selbst wenn der Benutzer einen sehr limitierten Browser oder ein Gerät wie einen Bildschirmleser verwendet, der die Inhalte der Seite vorliest. Da der normale Fluss darauf ausgelegt ist, ein lesbares Dokument zu erzeugen, arbeiten Sie auf diese Weise mit dem Dokument, anstatt gegen es, wenn Sie Änderungen am Layout vornehmen.

Bevor wir tiefer in verschiedene Layoutmethoden eintauchen, lohnt es sich, einige der Dinge, die Sie in früheren Modulen in Bezug auf den normalen Dokumentenfluss gelernt haben, zu überdenken.

Wie werden Elemente standardmäßig angeordnet?

Der Prozess beginnt damit, dass die Boxen einzelner Elemente so angeordnet werden, dass alle vorhandenen Inhalte durch ihre Polsterung, ihren Rahmen oder ihren Rand ergänzt werden. Dies nennen wir das Boxmodell.

Standardmäßig füllt der Inhalt eines Block-Elementes den verfügbaren Inline-Bereich des übergeordneten Elements aus und wächst entlang der Block-Dimension, um seinen Inhalt aufzunehmen. Die Größe von Inline-Elementen entspricht der Größe ihres Inhalts. Sie können width oder height auf einigen Elementen setzen, die einen Standardwert der display-Eigenschaft von inline haben, wie <img>, aber der display-Wert bleibt inline.

Wenn Sie das display-Eigenschaftsverhalten eines Inline-Elements auf diese Weise steuern möchten, verwenden Sie CSS, um es wie ein Block-Element verhalten zu lassen (z. B. mit display: block; oder display: inline-block;, was Merkmale beider mischt).

Das erklärt, wie Elemente individuell strukturiert sind, aber wie sieht es mit der Struktur aus, wenn sie miteinander interagieren? Der normale Layoutfluss (erwähnt im Artikel über die Layout-Einführung) ist das System, mit dem Elemente im Ansichtsfenster des Browsers platziert werden. Standardmäßig werden Block-Elemente in die Block-Fließrichtung gelegt, die auf dem Schreibmodus des übergeordneten Elements basiert (initial: horizontal-tb). Jedes Element erscheint in einer neuen Zeile unter dem vorherigen, wobei sie durch den spezifizierten Rand getrennt sind. Auf Englisch zum Beispiel (oder einem anderen horizontalen, von oben nach unten Schreibmodus) werden Block-Elemente vertikal angeordnet.

Inline-Elemente verhalten sich anders. Sie erscheinen nicht in neuen Zeilen; stattdessen sitzen sie alle in derselben Zeile zusammen mit jedem benachbarten (oder umgebrochenen) Textinhalt, solange es Platz dafür innerhalb der Breite des übergeordneten Block-Elements gibt. Wenn kein Platz vorhanden ist, wird der überfließende Inhalt in eine neue Zeile verschoben.

Wenn zwei vertikal benachbarte Elemente beide einen Rand gesetzt haben und ihre Ränder sich berühren, bleibt der größere der beiden Ränder bestehen und der kleinere verschwindet. Dies wird als Randkollaps bezeichnet. Kollisionen von Margins sind nur in vertikaler Richtung relevant.

Beispiel für normalen Fluss

Schauen wir uns ein einfaches Beispiel an, das all dies erklärt:

<h1>Basic document flow</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p>
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the size of one of our margins, not both.
</p>

<p>
  Inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line along with adjacent text nodes, if there is space on the same
  line. Overflowing inline elements will
  <span>wrap onto a new line if possible (like this one containing text)</span>,
  or just go on to a new line if not, much like this image will do:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="snippet of cloth" />
</p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgb(255 84 104 / 30%);
  border: 2px solid rgb(255 84 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

Beachten Sie, wie das HTML in genau der Reihenfolge angezeigt wird, in der es im Quellcode erscheint, wobei Block-Elemente übereinander gestapelt sind.

Für viele der Elemente auf Ihrer Seite wird der normale Fluss genau das Layout erstellen, das Sie benötigen. Für komplexere Layouts müssen Sie jedoch dieses Standardverhalten mit einigen der Ihnen in CSS zur Verfügung stehenden Werkzeuge ändern. Mit einem gut strukturierten HTML-Dokument zu beginnen, ist sehr wichtig, da Sie dann mit der Anordnung der Dinge, wie sie standardmäßig angeordnet sind, arbeiten können, anstatt dagegen anzukämpfen.

Übersteuerung des normalen Flusses

Die Methoden, die den normalen Fluss übersteuern und ändern können, wie Elemente in CSS angeordnet werden, die wir in diesem Modul im Detail behandeln werden, sind:

Die display-Eigenschaft

Standardwerte wie block, inline oder inline-block können das Verhalten von Elementen im normalen Fluss ändern, z. B. indem sie ein Block-Element wie ein Inline-Element verhalten lassen (wir haben diese bereits in der Lektion zum Boxmodell behandelt).

Floats

Das Anwenden eines float-Werts wie left kann dazu führen, dass Block-Elemente entlang einer Seite eines Elements flottieren, ähnlich wie Bilder manchmal in Zeitschriftenlayouts von Text umgeben sind.

Positionierung

Die position-Eigenschaft ermöglicht es Ihnen, die Platzierung von Boxen innerhalb anderer Boxen präzise zu steuern. static ist die Standardpositionierung im normalen Fluss, aber Sie können Elemente mit anderen Werten unterschiedlich anordnen, z. B. sie mit position: fixed am oberen Rand des Browserfensters positionieren.

Spezifische Layout-Systeme, die über display zugänglich sind

Es gibt auch gesamte Layout-Methoden, die über spezifische display-Werte aktiviert werden. Die wichtigsten, die Sie kennen sollten, sind CSS Grid und Flexbox, die beide beeinflussen, wie Kindelemente innerhalb ihrer Eltern angeordnet werden.

Responsives Design

Responsives Design bezieht sich auf die Erstellung von Layouts, die sich an verschiedene Geräte anpassen, auf denen die Webseite dargestellt wird (zum Beispiel Desktops und Mobiltelefone). Responsives Design bietet keine spezifischen Layout-Werkzeuge; seine bedeutendste Komponente ist die @media-Regel, die es Ihnen ermöglicht, je nach Geräteeigenschaften wie Bildschirmbreite oder -auflösung unterschiedliche Layouts anzuwenden.

Andere Layout-Techniken

Es gibt andere Layout-Techniken, die weniger häufig verwendet werden und die wir in diesem Modul nicht behandeln werden:

Tabellenlayout

Funktionen, die für das Styling von Teilen einer HTML-Tabelle entworfen wurden, können auf Nicht-Tabellen-Elemente angewendet werden, indem display: table und verwandte Eigenschaften verwendet werden.

Mehrspalten-Layout

Die Eigenschaften des Mehrspaltenlayouts können dazu führen, dass der Inhalt eines Blocks in Spalten angeordnet wird, wie Sie es in einer Zeitung sehen könnten.

Zusammenfassung

Dieser Artikel bietet einen kurzen Überblick über alle Layout-Technologien, die Sie zu diesem Zeitpunkt Ihres Lernens kennen sollten! Lesen Sie weiter für weitere Informationen zu jeder einzelnen Technologie. Als Nächstes schauen wir uns Floats an.

• Übersicht: CSS Layout
• Weiter