CSS-Leitfäden
Es gibt eine Reihe von Methoden, die Sie verwenden können, um Ihre Webseiten und Anwendungen zu gestalten. MDN enthält mehrere ausführliche Leitfäden zu den verschiedenen Methoden, und diese Seite bietet einen Überblick über alle.
Normaler Fluss, Block- und Inline-Layout
Wenn Sie kein Flex- oder Grid-Layout verwenden, wird Ihr Inhalt im normalen Fluss oder durch Block- und Inline-Layout angeordnet. Diese Leitfäden helfen Ihnen, die Funktionsweise dieser Layout-Methode zu verstehen.
- Block- und Inline-Layout im normalen Fluss
-
Eine Einführung in den normalen Fluss.
- Im Fluss und außerhalb des Flusses
-
Wie man ein Element aus dem Fluss entfernt und was dies 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, z. B. vertikalen Text.
- Fluss-Layout und Überlauf
-
Überlauf verstehen und verwalten.
- Einführung in das CSS-Grundboxmodell
-
Das Boxmodell zu verstehen, ist ein grundlegendes Wissen in CSS; dieser Leitfaden erklärt, wie es funktioniert.
- Beherrschung des Margen-Kollabierens
-
Finden Sie heraus, warum Sie manchmal weniger Rand haben, als Sie erwarten, aufgrund des Margen-Kollabierens im normalen Fluss.
- CSS-z-index verstehen
-
Absolute Positionierung, Flexbox und Grid führen dazu, dass der Stapel (die relative Position der Elemente auf der Z-Achse) über die
z-index
-Eigenschaft manipulierbar wird. Dieser Artikel erklärt, wie Sie dies verwalten.
Mehrspaltiges Layout
Das mehrspaltige Layout, oft als "Multicol" bezeichnet, nimmt Inhalte im normalen Fluss und teilt sie in Spalten auf. Erfahren Sie in den folgenden Leitfäden, wie Sie diese Layout-Methode verwenden.
- Grundkonzepte von Multicol
-
Ein Überblick über die grundlegenden Funktionen von Multicol.
- Spalten stylen
-
Es gibt begrenzte Styling-Möglichkeiten für Spalten; dieser Leitfaden erklärt, was Sie tun können.
- Spannen und Ausbalancieren
-
Elemente über mehrere Spalten spannen und den Inhalt der Spalten ausbalancieren.
- Überlauf in Multicol verwalten
-
Was passiert, wenn mehr Inhalt als verfügbarer Spaltenplatz vorhanden ist?
- Inhaltsumbrüche in Multicol
-
Umgang mit Inhaltsumbrüchen, wenn der Inhalt in Spalten aufgeteilt wird.
Flexbox
CSS Flexible Box Layout, allgemein bekannt als Flexbox, ist ein Layout-Modell, das für Benutzeroberflächendesign und die Anordnung von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines flexiblen Containers in jede Richtung angeordnet werden und ihre Größe "flexen", entweder um ungenutzten Platz auszufüllen oder um zu vermeiden, dass der Elternteil überläuft.
- Grundkonzepte von Flexbox
-
Ein Überblick über die Funktionen von Flexbox.
- Beziehung von Flexbox zu anderen Layout-Methoden
-
Wie Flexbox mit anderen Layout-Methoden und CSS-Spezifikationen zusammenhängt.
- Elemente in einem Flexcontainer ausrichten
-
Wie die Ausrichtungseigenschaften in Flexbox funktionieren.
- Flexelemente anordnen
-
Die verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und die potenziellen Probleme dabei.
- Verhältnisse von Flexelementen entlang der Hauptachse steuern
-
Erklärung der Eigenschaften
flex-grow
,flex-shrink
undflex-basis
. - Umbruch von Flexelementen meistern
-
Wie man Flexcontainer mit mehreren Zeilen erstellt und die Darstellung der Elemente entlang dieser Zeilen steuert.
- Typische Anwendungsfälle von Flexbox
-
Häufige Designmuster, die typische Flexbox-Anwendungsfälle darstellen.
Raster-Layout
CSS-Grid-Layout führt ein zweidimensionales Rastersystem in CSS ein. Rastersysteme können verwendet werden, um große Seitenbereiche oder kleine Benutzeroberflächenelemente anzuordnen.
- Grundkonzepte von Grid-Layout
-
Ein Überblick über die Funktionen des Raster-Layouts.
- Beziehung von Grid-Layout zu anderen Layout-Methoden
-
Wie Grid mit anderen Methoden wie Ausrichtung, Größenanpassung und Flexbox zusammenhängt.
- Layout mit linienbasierter Platzierung
-
Wie man Elemente anhand nummerierter Linien platziert.
- Raster-Template-Bereiche
-
Wie man Elemente mit der grid-template-Syntax platziert.
- Layout mit benannten Rasterlinien
-
Wie man Linien benennt und Elemente anhand von Liniennamen statt Nummern platziert.
- Automatische Platzierung im CSS-Grid-Layout
-
Wie man den Algorithmus zur automatischen Platzierung steuert und versteht, wie der Browser Elemente platziert.
- Box-Ausrichtung im CSS-Grid-Layout
-
Wie man Elemente ausrichtet und Platz auf beiden Achsen im Raster verteilt.
- CSS Grid, logische Werte und Schreibmodi
-
Wie man flussrelativen anstelle von physikalischen Eigenschaften und Werten mit Grid verwendet.
- CSS-Grid-Layout und Barrierefreiheit
-
Einige Überlegungen zur Barrierefreiheit in Bezug auf das Grid-Layout.
- Häufig verwendete Layouts mit CSS Grid umsetzen
-
Verwendung von Grid zur Erstellung häufiger Layouts.
- Subgrid
-
Eine Erklärung der Subgrid-Eigenschaft, Teil von Grid Level 2.
- Masonry-Layout
-
Eine Erklärung des Masonry-Layout-Features in Grid Level 3.
Ausrichtung
- Box-Ausrichtung im Block-Layout
-
Die Ausrichtungseigenschaften sind für Block- und Inline-Layouts spezifiziert, obwohl es derzeit keine Browserunterstützung gibt.
- Box-Ausrichtung in Flexbox
-
Die Ausrichtungseigenschaften wurden erstmals mit Flexbox eingeführt; dieser Leitfaden erklärt, wie sie funktionieren.
- Box-Ausrichtung im Raster-Layout
-
Wie man Elemente im Raster-Layout ausrichtet.
- Box-Ausrichtung im mehrspaltigen Layout
-
Wie die Ausrichtung im Multicol funktioniert.