Elemente ein- und ausblenden,
über- und nebeneinander anordnen
und das Layout der Kind-Elemente stark beeinflussen.

Grundlagen
Wichtige Werte für Display:

WerteBedeutung
none;Das Element wird nicht angezeigt und ist praktisch nicht da. Es hat keine Auswirkungen auf das Layout. Das ist der Unterschied zu OPACITY: 0 (Deckkraft: 0) und VISIBILITY: HIDDEN. Diese beiden machen das Element transparent. Ein transparenter Link ist aber z.B. Immer noch klickbar. Transparenter Text ist auch auszahlbar. Mit display: NONE ist der Link hingegen nicht im Browser. Im HTML-Quelltext der Seite wird der Inhalt auf jeden Fall aufgeführt. NONE kann gut genutzt werden um z.B. Inhalte auszublenden die bei anderen Zuständen (:hover, media-querie etc.) eingeblendet werden.
inline;Das Element kann keine Breite und Höhe haben sondern übernimmt diese Werte von seinem Inhalt. Es erzwingt keine neue Zeile. Ist Standard bei SPAN und wird benutzt um z.B. Wörter in einem Absatz anders zu gestalten. Es entspricht einen Zeichenformat in InDesign.
block;Das Element kann Breite und Höhe, Innenabstand und Aussenabstand (Boxmodell) haben. Es erzwingt eine neue Zeile. Die meisten HTML Elemente haben display: BLOCK als Standard. Z.B. H1 bis H6, P oder LI usw.
inline-block;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben.(Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
list-item;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben (Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
inline-list-item;Verhält sich wie LIST-ITEM. Der Inhalt wird jedoch unter dem Aufzählungszeichen umbrochen und nicht unter dem Anfang des Textes.
inherit;Das Element erbt (INHERIT) den Display-Wert von seinem Eltern-Element
initial;Die Display Eigenschaft wird auf den initialen Standard zurückgesetzt.

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

fff
Display: NONE und Animation

Hinweis: Wird der Wert bei Display: NONE geändert können damit auch Animationen gestartet werden. In Kombination mit der Pseudoclass :hover werden über dieses Prinzip häufig Submenus in Naviagtionen erstellt.

Wichtige Werte für Display:

WerteBedeutung
none;Das Element wird nicht angezeigt und ist praktisch nicht da. Es hat keine Auswirkungen auf das Layout. Das ist der Unterschied zu OPACITY: 0 (Deckkraft: 0) und VISIBILITY: HIDDEN. Diese beiden machen das Element transparent. Ein transparenter Link ist aber z.B. Immer noch klickbar. Transparenter Text ist auch auszahlbar. Mit display: NONE ist der Link hingegen nicht im Browser. Im HTML-Quelltext der Seite wird der Inhalt auf jeden Fall aufgeführt. NONE kann gut genutzt werden um z.B. Inhalte auszublenden die bei anderen Zuständen (:hover, media-querie etc.) eingeblendet werden.
inline;Das Element kann keine Breite und Höhe haben sondern übernimmt diese Werte von seinem Inhalt. Es erzwingt keine neue Zeile. Ist Standard bei SPAN und wird benutzt um z.B. Wörter in einem Absatz anders zu gestalten. Es entspricht einen Zeichenformat in InDesign.
block;Das Element kann Breite und Höhe, Innenabstand und Aussenabstand (Boxmodell) haben. Es erzwingt eine neue Zeile. Die meisten HTML Elemente haben display: BLOCK als Standard. Z.B. H1 bis H6, P oder LI usw.
inline-block;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben.(Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
list-item;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben (Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
inline-list-item;Verhält sich wie LIST-ITEM. Der Inhalt wird jedoch unter dem Aufzählungszeichen umbrochen und nicht unter dem Anfang des Textes.
inherit;Das Element erbt (INHERIT) den Display-Wert von seinem Eltern-Element
initial;Die Display Eigenschaft wird auf den initialen Standard zurückgesetzt.

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

xxx
Display: NONE vs. Opacity

Hinweis: Display: NONE und alle Kinder-Elemente sind nicht da und nicht einfach nur Transparent.

Wichtige Werte für Display:

WerteBedeutung
none;Das Element wird nicht angezeigt und ist praktisch nicht da. Es hat keine Auswirkungen auf das Layout. Das ist der Unterschied zu OPACITY: 0 (Deckkraft: 0) und VISIBILITY: HIDDEN. Diese beiden machen das Element transparent. Ein transparenter Link ist aber z.B. Immer noch klickbar. Transparenter Text ist auch auszahlbar. Mit display: NONE ist der Link hingegen nicht im Browser. Im HTML-Quelltext der Seite wird der Inhalt auf jeden Fall aufgeführt. NONE kann gut genutzt werden um z.B. Inhalte auszublenden die bei anderen Zuständen (:hover, media-querie etc.) eingeblendet werden.
inline;Das Element kann keine Breite und Höhe haben sondern übernimmt diese Werte von seinem Inhalt. Es erzwingt keine neue Zeile. Ist Standard bei SPAN und wird benutzt um z.B. Wörter in einem Absatz anders zu gestalten. Es entspricht einen Zeichenformat in InDesign.
block;Das Element kann Breite und Höhe, Innenabstand und Aussenabstand (Boxmodell) haben. Es erzwingt eine neue Zeile. Die meisten HTML Elemente haben display: BLOCK als Standard. Z.B. H1 bis H6, P oder LI usw.
inline-block;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben.(Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
list-item;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben (Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
inline-list-item;Verhält sich wie LIST-ITEM. Der Inhalt wird jedoch unter dem Aufzählungszeichen umbrochen und nicht unter dem Anfang des Textes.
inherit;Das Element erbt (INHERIT) den Display-Wert von seinem Eltern-Element
initial;Die Display Eigenschaft wird auf den initialen Standard zurückgesetzt.

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

xxx
Display: TABLE

Hinweis: Einige Elemente lassen sich scheinbar nicht in ihrer Position beeinflussen. So erscheint die CAPTION oberhalb, obwohl sie im HTML unterhalb der anderen Inhalte steht. Dies liegt an den jeweiligen CSS Standard Einstellungen von Display.

Tabellenbezogene Werte für Display:

WerteBedeutung
table;Das Element verhält sich wie TABLE. Es kann tabellenbezogene Inhalte, z.B. TBODY, TR, TD etc., haben. Es verhält sich wie ein Block-Element.
inline-table;Hat kein entsprechendes HTML Element. Verhält sich wie display: TABLE, aber ist ein INLINE Element und erzwingt somit keine neue Zeile.
table-caption;Entspricht Element CAPTION. Richtet innerhalb einer Tabelle die Beschreibung oberhalb der Tabelle aus.
table-cell;Entspricht dem Element TD. Einzelne Zelle innerhalb einer ZEILE (TR).
table-footer-group;Entspricht dem Element TFOOT. Fußzeile der Tabelle. Immer letztes Kind-Element von TABLE.
table-header-group;Entspricht dem Element THEAD. Kopfzeile der Tabelle. Immer erstes Kind-Element von TABLE.
table-row;Entspricht dem Element TR. Zeile (Table-Row) in THEAD, TBODY, TFOOT. Enthält die TD.
table-row-group;Entspricht dem Element TBODY. Hauptteil der Tabelle. Unterhalb von THEAD und oberhalb on TFOOT.

xxx
Display: GRID und die Zukunft ...

Hinweis: Leider werden die experimentellen Werte noch nicht wirklich unterstützt. So funktioniert das GRID System z.B. nur mit dem 80kb Javascript Polyfill in allen Browsern. Es werden noch einige Jahre vergehen bis damit gearbeitet werden kann. Das finde ich Schade. Bei Display: Flex ist die Zeit aber auch rumgegangen.😅

Experimentelle Werte für Display:

WerteBedeutung
grid;Gestaltungsraster für die Kind-Elemente. Ermöglicht mehr Einstellungen im Vergleich zu FLEX, da die Elemente sowohl auf Ebene der Spalten als auch auf ebene der Zeilen verbunden werden können. Leider noch nicht vollständig unterstützt und ist nur über ein Polydill lauffähig. Verhält sich wie als BLOCK-Element. GRID wird näher über weitere Eigenschaften definiert.
inline-grid;Gestaltungsraster für die Kind-Elemente. Ermöglicht mehr Einstellungen als Flex. Leider noch nicht vollständig unterstützt. Verhält sich wie als Inline-Element.
run-in;Dynamisches Verhalten. Je nach Kontext verhält sich das Element als BLOCK, Inline oder Inline-Block. Der Kontext wird dabei vom Nachbarn bestimmt.
contents;Das eigene Box-Verhalten wird deaktiviert.

xxx
► Weitere Infos

Externe Quellen

xxx

xxx

xxx