static || Inhalte folgen linear nacheinander, so wie sie im HTML-Dokument
einander
folgen.
relative || Zunächst nicht anders als static.
absolute || Das Element wird aus dem linearen Fluss genommen, sein
ursprünglicher Raum
kollabiert.
fixed || Wie absolut, aber das Koordinatensystem des fixierten
Elements ist der Viewport, nicht mehr das Dokument. Das Element wird nicht mehr mit dem
Dokument gescrollt. mediaevent/css/position-fixed
sticky || Wie fixed, aber das Element scrollt bis zu einem
vorgegebenen Punkt und bleibt dann im Viewport fixiert. mediaevent/css/position-sticky
inherit || Das Element erbt die Art der Positionierung von seinem
umfassenden Element.
Der Browser erzeugt für jedes HTML-Element eine Box. CSS display legt den Typ
der Box fest und weist ihr ein Verhalten zu. Selbst innerhalb von Textzeilen entstehen
Boxen, wenn Wörter in einem HTML-Tag wie em, span oder a
liegen. CSS display ist immer ein Schalter: Die Werte sind nicht numerisch, so dass
display durch CSS transition nicht animierbar ist.
display: none; || unterdrückt die Anzeige eines Elements vollständig und
das Element verbraucht keinen Platz im Layout der Seite.
display: block; || verwandelt ein Inline-Element (Element, das keinen
Zeilenumbruch erzeugt) in ein Blockelement, das zu einem Zeilenumbruch führt. Wird einem
HTML-Element wie span oder em ein display: block zugewiesen, entsteht
ein Zeilenumbruch vor und nach dem Element.
display: inline; || Umgekehrt transformiert die Eigenschaft display: inline
ein Blockelement in ein Inline-Element.
display: contents; || Blöcke, die als display:contents notiert sind,
verlieren ihre Wirkung, so als wären ihr öffnendes und schließendes HTML-Tag nicht mehr
vorhanden. Anders als display: none bleiben ihre Inhalte mit allen Eigenschaften
erhalten. mediaevent/css/display-contents
display: inline-block; || Elemente mit inline-block können als
inline-Elemente (z.B. mit line-height und vertical-align) gestylt werden. padding und
margin regeln den Abstand zum umfassenden Block und am Ende akzeptieren Elemente mit
inline-block auch width und height wie ein Block-Element. mediaevent/display-inline-block
display: table; / table-row; / table-cell; || Tabellen und Tabellenzellen
haben einige nützliche Eigenschaften, die mit Hilfe von display: table, table-row und
table-cell zum Vorschein kommen. mediaevent/css/display-table
display: flex; || Die Flexbox ist ein alternatives Modell für die
Positionierung neben dem bekannten Block-Modell mit position: absolute / relative und
float: left / right. Flex-Container richten die in ihm enthaltenen Elemente entweder
horizontal (display:flex; flex-direction:row) oder vertikal (display:flex;
flex-direction:column) aus. Der Flex-Container bestimmt also das Verhalten seiner
Kinder. css-layout-flex-justify-content mediaevent/css/display-flex
display: grid; || Während display-flex Elemente in Zeilen oder Spalten
organisiert, generiert display: grid ein zweidimensionales Layout-Raster, in dem sich
Element über mehrere Zeilen und Spalten erstrecken können. Der Inhalt bleibt in der
logischen Reihenfolge, denn jedes Element kann in einen beliebigen Bereich platziert
werden. css-layout-grid mediaevent/css/display-grid
Eine kurze Erläuterung der oben genannten und noch viele weitere display Arten.
mediaevent/css/display
auto-fit Die Elemente passen sich dem verfügbaren Platz im Grid an und füllen
die voll Breite aus auto-fill Die Elemente passen sich nicht an. Das Grid erzeugt zusätzliche leere
Spalten.
Version 1: Das parent zentriert das child.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Version 2: Das child zentriert sich selber im parent.
.parent {
display: grid;
}
.child {
margin: auto;
}
Version 3: Das parent zentriert das child.
.parent {
display: grid;
place-items: center;
}
grid-template vs grid-auto
Zusammenfassend werden die grid-template-* Eigenschaften verwendet, um Zellen
für das explizite Raster zu erstellen, zu platzieren und zu vergrößern. Jede im Raster
vorhandene Zelle, die nicht explizit von dieser Eigenschaft erstellt wird, bildet einen
Teil des impliziten Rasters, dessen Größe durch die grid-auto-* Eigenschaften
angepasst werden kann.
Screenshot von w3.org