Philip: /* Weitere Artikel über CSS */

2025-02-05T18:21:03Z

Philip am 23. Januar 2025 um 09:11 Uhr

2025-01-23T09:11:31Z

Neue Seite

{{Programmierung
|name = CSS: display
|bild = Css.png
|portal = [[Portal:CSS|CSS-Portal]] • [[Portal:Webentwickler|Portal für Webentwickler]]
}}
Das Verständnis der CSS-Eigenschaft <code>display</code> 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 <code>display</code> ===
Hier ist eine Liste der verfügbaren Werte für die Eigenschaft <code>display</code>:

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

== Weitere Artikel über CSS ==
{{Enzyklopädie CSS/Navigation}}
{{Vorlage:Navigationsleiste/CSS}}
[[wj-en:Encyclopedia CSS: display]]
[[wj-ru:Энциклопедия CSS: display]]
[[wj-es:Enciclopedia CSS: display]]
[[wj-it:Enciclopedia CSS: display]]
[[wj-fr:Encyclopédie CSS: display]]

[[Kategorie:CSS]]

← Nächstältere Version		Version vom 5. Februar 2025, 21:21 Uhr
Zeile 50:		Zeile 50:
	== Weitere Artikel über CSS ==		== Weitere Artikel über CSS ==
	{{Enzyklopädie CSS/Navigation}}		{{Enzyklopädie CSS/Navigation}}
	{{~~Vorlage:~~Navigationsleiste/CSS}}		{{Navigationsleiste/CSS}}
	[[wj-en:Encyclopedia CSS: display]]		[[wj-en:Encyclopedia CSS: display]]
	[[wj-ru:Энциклопедия CSS: display]]		[[wj-ru:Энциклопедия CSS: display]]

Enzyklopädie CSS: display - Versionsgeschichte

Philip: /* Weitere Artikel über CSS */

Philip am 23. Januar 2025 um 09:11 Uhr