Einführung in CSS-Layout

Elemente auf einer Webseite werden im Normalfluss angeordnet, wenn kein CSS angewendet wurde, um ihr Verhalten zu ändern. Sie können das Verhalten von Elementen ändern, indem Sie ihre Position im Normalfluss anpassen oder sie vollständig aus dem Normalfluss entfernen. Ein solides, gut strukturiertes Dokument, das im Normalfluss lesbar ist, ist die beste Grundlage für jede Webseite. Es stellt sicher, dass Ihr Inhalt lesbar ist, auch wenn der Benutzer einen stark eingeschränkten Browser oder ein Gerät wie einen Screenreader verwendet, der den Seiteninhalt vorliest. Zudem arbeitet der Normalfluss darauf hin, ein lesbares Dokument zu erstellen. Wenn Sie auf diese Weise beginnen, arbeiten Sie mit dem Dokument, anstatt dagegen, während Sie Änderungen am Layout vornehmen.

Bevor wir verschiedene Layoutmethoden genauer betrachten, lohnt es sich, einige der in den vorherigen Modulen behandelten Punkte bezüglich des normalen Dokumentenflusses erneut zu betrachten.

Der Prozess beginnt damit, dass die Boxen einzelner Elemente so angeordnet werden, dass jeglicher padding, border oder margin, den sie aufweisen, zu ihrem Inhalt hinzugefügt wird. Dies nennen wir das Boxmodell.

Standardmäßig füllt der Inhalt eines Block-Levels-Elements den verfügbaren Inline-Space des übergeordneten Elements, das es enthält, und wächst entlang der Block-Dimension, um seinen Inhalt aufzunehmen. Die Größe von Inline-Elementen entspricht nur der Größe ihres Inhalts. Sie können width oder height auf einige Elemente einstellen, die einen Standard-display-Wert von inline haben, wie z. B. <img>, jedoch bleibt der display-Wert dennoch inline.

Falls Sie das display-Attribut eines Inline-Elements auf diese Weise steuern möchten, verwenden Sie CSS, um es wie ein Block-Level-Element zu behandeln (z. B. mit display: block; oder display: inline-block;, welches Merkmale von beiden kombiniert).

Das erklärt, wie Elemente einzeln strukturiert werden, aber wie sieht es mit der Struktur aus, wenn sie miteinander interagieren? Der normale Layoutfluss (im Layout-Einführungsartikel erwähnt) ist das System, nach dem Elemente innerhalb des Viewports des Browsers platziert werden. Standardmäßig werden Block-Level-Elemente in der Block-Fluss-Richtung angeordnet, welche auf dem Schreibmodus der Eltern basiert (Initialwert: horizontal-tb). Jedes Element erscheint in einer neuen Zeile unter dem vorherigen, wobei jedes durch den festgelegten margin getrennt ist. Auf Englisch beispielsweise (oder in anderen horizontalen, von oben nach unten geschriebenen Schreibmodi) werden Block-Level-Elemente vertikal angeordnet.

Inline-Elemente verhalten sich anders. Sie erscheinen nicht in neuen Zeilen, sondern sitzen alle in einer einzigen Zeile zusammen mit jeglichem angrenzenden (oder umgebrochenem) Textinhalt, sofern innerhalb der Breite des übergeordneten Block-Levels-Elements Platz dafür vorhanden ist. Falls nicht, wird der überfließende Inhalt in eine neue Zeile verschoben.

Wenn zwei vertikal angrenzende Elemente beide einen margin-Wert haben und sich ihre Ränder überschneiden, bleibt der größere der beiden margin-Werte erhalten und der kleinere verschwindet. Dies wird als Margin-Kollaps bezeichnet. Margin-Kollaps ist nur in der vertikalen Richtung relevant.

Schauen wir uns ein einfaches Beispiel an, das alles 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, dass das HTML genau in der Reihenfolge angezeigt wird, in der es im Quellcode erscheint, mit Block-Elementen, die übereinander gestapelt sind.

Für viele der Elemente auf Ihrer Seite wird der Normalfluss genau das Layout erzeugen, das Sie benötigen. Für komplexere Layouts müssen Sie jedoch dieses Standardverhalten mit den in CSS verfügbaren Tools ändern. Mit einem gut strukturierten HTML-Dokument zu beginnen, ist sehr wichtig, da Sie dann mit der Standardanordnung arbeiten können, anstatt dagegen anzukämpfen.

Die Methoden, die den Normalfluss überschreiben und die Anordnung von Elementen in CSS ändern können und die wir in diesem Modul im Detail behandeln, sind:

Die display-Eigenschaft

Standardwerte wie block, inline oder inline-block können das Verhalten von Elementen im Normalfluss ändern, z. B. indem ein Block-Level-Element wie ein Inline-Level-Element behandelt wird (wie wir im Boxmodell behandelt haben).

Floats

Durch Anwenden eines float-Wertes wie left können Block-Level-Elemente um ein Element herumfließen, ähnlich wie Bilder in Magazinlayouts, um die herum Text schwebt.

Positionierung

Die position-Eigenschaft erlaubt es Ihnen, die Platzierung von Boxen innerhalb anderer Boxen präzise zu kontrollieren. static-Positionierung ist der Standard im Normalfluss, aber Sie können Elemente durch andere Werte wie position: fixed anders platzieren, indem Sie sie beispielsweise an den oberen Bereich des Browser-Viewports fixieren.

Spezifische Layoutsysteme über display

Es gibt auch komplette Layoutmethoden, die über spezifische display-Werte aktiviert werden. Die wichtigsten, die Sie kennen sollten, sind CSS-Grid und Flexbox, die beide ändern, wie Kind-Elemente 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 angezeigt wird (z. B. Desktops und Mobiltelefone). Responsives Design bietet keine spezifischen eigenen Layout-Tools; sein bedeutendstes Element ist die @media-At-Regel, mit der verschiedene Layouts je nach Geräteattributen wie Bildschirmbreite oder Auflösung angewendet werden können.

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

Tabellenlayout

Funktionen, die für die Gestaltung von Teilen einer HTML-Tabelle entwickelt wurden, können auf Nicht-Tabellen-Elemente unter Verwendung von display: table und zugehörigen Eigenschaften angewendet werden.

Mehrspalten-Layout

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

Dieser Artikel hat eine kurze Zusammenfassung aller Layout-Technologien geliefert, die Sie bis zu diesem Punkt Ihres Lernens kennen sollten! Lesen Sie weiter, um mehr Informationen zu jeder einzelnen Technologie zu erhalten. Als Nächstes beschäftigen wir uns mit Floats.

• Übersicht: CSS-Layout
• Weiter