CSS-Leitfäden

Es gibt eine Reihe von Methoden, die Sie verwenden können, um Ihre Webseiten und Anwendungen zu gestalten. MDN enthält eine Vielzahl von ausführlichen Leitfäden zu den verschiedenen Methoden, und diese Seite bietet einen Überblick über alle.

Normalfluss, Block- und Inline-Layout

Wenn Sie kein Flex- oder Raster-Layout verwenden, dann wird Ihr Inhalt im Normalfluss oder im Block- und Inline-Layout angeordnet. Diese Leitfäden helfen Ihnen zu verstehen, wie diese Layoutmethode funktioniert.

Block- und Inline-Layout im Normalfluss: Eine Einführung in den Normalfluss.
Im Fluss und aus dem Fluss: Wie Sie ein Element aus dem Fluss entfernen und was das für das Layout Ihres Dokuments bedeutet.
Formatierungskontexte erklärt: Eine Einführung in die Erstellung eines neuen Formatierungskontexts.
Fluss-Layout und Schreibmodi: Wie das Fluss-Layout funktioniert, wenn Sie einen anderen Schreibmodus verwenden, wie z.B. vertikalen Text.
Fluss-Layout und Überlauf: Verstehen und Verwalten von Überläufen.
Einführung in das grundlegende CSS-Boxmodell: Das Verständnis des Boxmodells ist eine fundamentale CSS-Kenntnis; dieser Leitfaden erklärt, wie es funktioniert.
Beherrschung der Randüberlagerung: Finden Sie heraus, warum Sie manchmal mit weniger Rand enden als erwartet, aufgrund der Randüberlagerung im Normalfluss.
Verständnis von CSS-z-index: Absolute Positionierung, Flexbox und Grid führen zur Beeinflussung der Stapelreihenfolge (relative Position der Elemente auf der z-Achse) durch die z-index-Eigenschaft. Dieser Artikel erklärt, wie man sie verwaltet.

Mehrspaltiges Layout

Das mehrspaltige Layout, oft als Multikol bezeichnet, nimmt Inhalte im Normalfluss auf und teilt sie in Spalten auf. Erfahren Sie, wie Sie diese Layoutmethode in den folgenden Leitfäden verwenden.

Grundlagen des Multikol: Ein Überblick über die grundlegende Funktionalität von Multikol.
Styling von Spalten: Es gibt nur begrenzte Styling-Möglichkeiten für Spalten; dieser Leitfaden erklärt, was Sie tun können.
Spannen und Ausgleichen: Elemente über Spalten spannen und den Inhalt von Spalten ausgleichen.
Umgang mit Überlauf in Multikol: Was passiert, wenn mehr Inhalt vorhanden ist als Platz in den Spalten?
Inhaltsumbrüche in Multikol: Umgang mit Inhaltsumbrüchen, wenn der Inhalt in Spalten aufgeteilt wird.

Flexbox

Das CSS Flexible Box Layout, allgemein bekannt als Flexbox, ist ein Layoutmodell, das für das Design von Benutzeroberflächen und das Layout von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in beliebiger Richtung angeordnet werden und ihre Größen "flexen", entweder um ungenutzten Raum zu füllen oder um ein Überlaufen des Elternteils zu vermeiden.

Grundkonzepte von Flexbox: Ein Überblick über die Funktionen von Flexbox.
Beziehung von Flexbox zu anderen Layoutmethoden: Wie Flexbox sich zu anderen Layoutmethoden und anderen CSS-Spezifikationen verhält.
Ausrichten von Elementen in einem Flex-Container: Wie die Box-Ausrichtungs-Eigenschaften mit Flexbox funktionieren.
Bestellen von Flex-Elementen: Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und die möglichen Probleme dabei.
Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschung des Umbruchs von Flex-Elementen: Wie man Flex-Container mit mehreren Zeilen erstellt und die Anzeige der Elemente entlang dieser Zeilen steuert.
Typische Anwendungsfälle von Flexbox: Häufige Designmuster, die typische Flexbox-Anwendungsfälle sind.

Raster-Layout

CSS Grid Layout führt ein zweidimensionales Rastersystem in CSS ein. Raster können verwendet werden, um große Bereiche einer Seite oder kleine Benutzeroberflächenelemente zu gestalten.

Grundkonzepte von Raster-Layout: Ein Überblick über die Funktionen des Raster-Layouts.
Beziehung von Raster-Layout zu anderen Layoutmethoden: Wie das Raster im Verhältnis zu anderen Methoden wie Ausrichtung, Größenanpassung und Flexbox steht.
Layout mit zeilenbasierter Platzierung: Wie man Elemente durch nummerierte Linien platziert.
Grid-Template-Bereiche: Wie man Elemente mit der Grid-Template-Syntax platziert.
Layout mit benannten Rasterlinien: Wie man Linien benennt und Elemente anstelle von Nummern nach Liniennamen platziert.
Automatische Platzierung im CSS-Raster-Layout: Wie man den Auto-Platzierungsalgorithmus verwaltet und versteht, wie der Browser Elemente platziert.
Box-Ausrichtung im CSS-Raster-Layout: Wie man Elemente ausrichtet und Platz auf beiden Achsen im Raster verteilt.
CSS-Raster, logische Werte und Schreibmodi: Wie man fluss-relative anstatt physischer Eigenschaften und Werte mit Raster verwendet.
CSS-Raster-Layout und Barrierefreiheit: Einige Überlegungen zur Barrierefreiheit beim Arbeiten mit Raster-Layout.
CSS-Raster und progressive Verbesserung: Wie man sicherstellt, dass Ihre Website immer noch gut funktioniert in Browsern, die keine Raster unterstützen.
Realisierung von gängigen Layouts mit CSS-Rastern: Verwendung von Raster zur Erstellung von gängigen Layouts.
Subgrid: Eine Erklärung des Subgrid-Werts, Teil von Grid Level 2.
Mauerwerks-Layout: Eine Erklärung der Mauerwerks-Layout-Funktion in Grid Level 3.

Ausrichtung

Box-Ausrichtung im Block-Layout: Die Ausrichtungseigenschaften sind für Block- und Inline-Layout spezifiziert, obwohl es noch keine Browser-Unterstützung gibt.
Box-Ausrichtung in Flexbox: Die Ausrichtungs-Eigenschaften traten zuerst mit Flexbox auf; dieser Leitfaden erklärt, wie sie funktionieren.
Box-Ausrichtung im Raster-Layout: Wie man Elemente im Raster-Layout ausrichtet.
Box-Ausrichtung im Mehrspalten-Layout: Wie die Ausrichtung in Multikol funktioniert.