Enzyklopädie CSS:display

Vorlage:Programmierung Das Verständnis der CSS-Eigenschaft display kann aufgrund ihrer zahlreichen möglichen Werte, die jeweils das Verhalten und die Darstellung eines Elements beeinflussen, eine Herausforderung darstellen. Diese Eigenschaft bestimmt, wie sich ein Element im Dokument verhält: ob es blockartig, inline, flexibel, rasterbasiert oder vollständig unsichtbar ist.

Liste der verfügbaren Werte für die Eigenschaft display

Hier ist eine Liste der verfügbaren Werte für die Eigenschaft display:

• display: -webkit-box — ein veralteter Wert zur Erstellung von Blocklayouts in Webkit-basierten Browsern.
• display: -webkit-inline-box — ähnlich wie -webkit-box, jedoch für Inline-Layouts in Webkit-basierten Browsern.
• display: block — macht das Element blockartig, sodass es die gesamte Breite seines übergeordneten Elements einnimmt.
• display: contents — das Element selbst verschwindet, aber seine Kindelemente bleiben im DOM.
• display: flex — macht das Element zu einem flexiblen Layout-Container (Flexbox).
• display: flow — legt das Standardflussverhalten fest (Standardwert für die meisten Elemente).
• display: flow-root — erstellt einen neuen Blockformatierungskontext, als wäre das Element ein Blockcontainer.
• display: grid — macht das Element zu einem Rasterlayout-Container (Grid).
• display: inherit — erbt den Wert der Eigenschaft display vom übergeordneten Element.
• display: initial — setzt die Eigenschaft display auf ihren ursprünglichen Wert zurück.
• display: inline — macht das Element inline, sodass es nur die notwendige Breite einnimmt.
• display: inline-block — kombiniert das Verhalten von Inline- und Blockelementen (kann Abmessungen haben, bleibt jedoch inline).
• display: inline-flex — macht das Element zu einem Inline-Flexcontainer.
• display: inline-grid — macht das Element zu einem Inline-Rastercontainer.
• display: inline-masonry — experimenteller Wert für Inline-Masonry-Layouts.
• display: inline-table — macht das Element zu einer inlineartigen Tabelle.
• display: list-item — macht das Element zu einem Listenelement mit einem Marker (wie bei <li>).
• display: masonry — experimenteller Wert für dynamische Masonry-Rasterlayouts.
• display: math — experimenteller Wert für mathematische Markups.
• display: none — blendet das Element aus und entfernt es aus dem Dokumentenfluss.
• display: revert — setzt die Eigenschaft display auf die Standardstile des Browsers zurück.
• display: revert-layer — experimenteller Wert zum Zurücksetzen von Stilen in bestimmten Schichten.
• display: ruby — macht das Element zu einem Container für Ruby-Anmerkungen (verwendet in Sprachen, die Furigana benötigen).
• display: ruby-text — macht das Element zu Ruby-Text (Furigana).
• display: table — macht das Element zu einer blockartigen Tabelle.
• display: table-caption — macht das Element zu einer Tabellenbeschriftung.
• display: table-cell — macht das Element zu einer Tabellenzelle.
• display: table-column — macht das Element zu einer Tabellenspalte.
• display: table-column-group — macht das Element zu einer Gruppe von Tabellenspalten.
• display: table-footer-group — macht das Element zu einer Gruppe von Tabellenfußzeilen.
• display: table-header-group — macht das Element zu einer Gruppe von Tabellenkopfzeilen.
• display: table-row — macht das Element zu einer Tabellenzeile.
• display: table-row-group — macht das Element zu einer Gruppe von Tabellenzeilen.
• display: unset — entfernt den gesetzten Wert und setzt die Eigenschaft in ihren ursprünglichen oder geerbten Zustand zurück.

Jeder dieser Werte hat eine spezifische Funktion, die eine flexible Steuerung des Seitenlayouts ermöglicht. Aufgrund der großen Vielfalt kann die Auswahl des richtigen Werts jedoch schwierig sein, und eine falsche Verwendung kann zu unerwarteten Ergebnissen führen.

In separaten Artikeln werden wir jeden Wert der Eigenschaft display im Detail untersuchen, lernen, wie und wann man sie verwendet, und ihre Browserkompatibilität analysieren.