display
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die display
-Eigenschaft in CSS legt fest, ob ein Element als Block- oder Inline-Box behandelt wird, sowie das Layout, das für seine Kinder verwendet wird, wie z. B. Flow-Layout, Grid oder Flex.
Formal setzt die display
-Eigenschaft die inneren und äußeren Display-Typen eines Elements. Der äußere Typ bestimmt die Teilnahme eines Elements am Flow-Layout; der innere Typ legt das Layout von Kinder-Elementen fest. Einige Werte von display
sind vollständig in eigenen individuellen Spezifikationen definiert; zum Beispiel ist das Detail dessen, was passiert, wenn display: flex
deklariert wird, in der Spezifikation des CSS Flexible Box Models beschrieben.
Probieren Sie es aus
Syntax
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* box generation */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
Die CSS-Eigenschaft display
wird mit Schlüsselwortwerten angegeben.
Gruppierte Werte
Die Schlüsselwortwerte können in sechs Wertkategorien gruppiert werden.
Outside
<display-outside>
-
Diese Schlüsselwörter legen den äußeren Display-Typ des Elements fest, das heißt im Wesentlichen seine Rolle im Flow-Layout:
block
-
Das Element erzeugt eine Block-Box, die sowohl vor als auch nach dem Element Zeilenumbrüche im normalen Fluss erzeugt.
inline
-
Das Element erzeugt eine oder mehrere Inline-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss wird das nächste Element in derselben Zeile sein, wenn Platz vorhanden ist.
Hinweis:
Wenn Browser, die die Multi-Keyword-Syntax unterstützen, eine display
-Eigenschaft mit nur einem äußeren Wert (z. B. display: block
oder display: inline
) vorfinden, wird der innere Wert auf flow
gesetzt (z. B. display: block flow
und display: inline flow
).
Hinweis:
Um sicherzustellen, dass Layouts in älteren Browsern funktionieren, können Sie die Ein-Wert-Syntax verwenden. Beispielsweise könnte display: inline flex
mit einem Fallback wie dem folgenden verwendet werden:
.container {
display: inline-flex;
display: inline flex;
}
Weitere Informationen finden Sie unter Verwendung der Multi-Keyword-Syntax mit CSS-Display.
Inside
<display-inside>
-
Diese Schlüsselwörter legen den inneren Display-Typ des Elements fest, der definiert, in welchem Formatierungskontext seine Inhalte ausgelegt werden (sofern es sich um ein nicht ersetzbares Element handelt):
flow
-
Das Element legt seine Inhalte unter Verwendung des Flow-Layouts (Block- und Inline-Layout) an.
Wenn sein äußerer Display-Typ
inline
ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Block-Box.Abhängig vom Wert anderer Eigenschaften (wie
position
,float
oderoverflow
) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, stellt es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte dar oder integriert seine Inhalte in seinen übergeordneten Formatierungskontext. flow-root
-
Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext erstellt, wodurch der Formatierungspunkt definiert wird.
table
-
Diese Elemente verhalten sich wie HTML
<table>
-Elemente. Es definiert eine Block-Level-Box. flex
-
Das Element verhält sich wie ein Block-Level-Element und legt seinen Inhalt gemäß dem Flexbox-Modell an.
grid
-
Das Element verhält sich wie ein Block-Level-Element und legt seinen Inhalt gemäß dem Grid-Modell an.
ruby
-
Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML
<ruby>
-Elemente.
Hinweis:
Wenn Browser, die die Multi-Keyword-Syntax unterstützen, auf eine display
-Eigenschaft treffen, die nur einen inneren Wert hat (z. B. display: flex
oder display: grid
), wird der äußere Wert auf block
gesetzt (z. B. display: block flex
und display: block grid
).
List Item
<display-listitem>
-
Das Element erzeugt eine Block-Box für den Inhalt und eine separate Inline-Box für das Listenelement.
Ein einzelner Wert von list-item
bewirkt, dass das Element sich wie ein Listenelement verhält. Dies kann zusammen mit list-style-type
und list-style-position
verwendet werden.
list-item
kann auch mit jedem <display-outside>
-Schlüsselwort und dem Schlüsselwort flow
oder flow-root
aus <display-inside>
kombiniert werden.
Hinweis:
In Browsern, die die Multi-Keyword-Syntax unterstützen, wird, wenn kein innerer Wert angegeben ist, standardmäßig flow
verwendet.
Wenn kein äußerer Wert angegeben ist, hat die Hauptbox einen äußeren Anzeige-Typ von block
.
Internal
<display-internal>
-
Einige Layout-Modelle wie
table
undruby
haben eine komplexe interne Struktur mit verschiedenen Rollen, die ihre Kinder und Nachfahren ausfüllen können. Dieser Abschnitt definiert diese "internen" Display-Werte, die nur innerhalb dieses bestimmten Layout-Modus Bedeutung haben.table-row-group
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<tbody>
. table-header-group
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<thead>
. -
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<tfoot>
. table-row
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<tr>
. table-cell
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<td>
. table-column-group
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<colgroup>
. table-column
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<col>
. table-caption
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<caption>
. ruby-base
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<rb>
. ruby-text
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<rt>
. ruby-base-container
-
Diese Elemente werden als anonyme Boxen generiert.
ruby-text-container
-
Diese Elemente verhalten sich wie HTML-Elemente vom Typ
<rtc>
.
Box
<display-box>
-
Diese Werte definieren, ob ein Element überhaupt Anzeige-Boxen erzeugt.
contents
-
Diese Elemente erzeugen keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie, dass die Spezifikation in CSS Display Level 3 beschreibt, wie sich der Wert
contents
auf "ungewöhnliche Elemente" auswirkt – Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details. none
-
Deaktiviert die Anzeige eines Elements, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existiert). Auch alle Nachfahren-Elemente haben ihre Anzeige deaktiviert. Um ein Element den Platz einnehmen zu lassen, den es normalerweise beanspruchen würde, ohne tatsächlich etwas darzustellen, verwenden Sie stattdessen die Eigenschaft
visibility
.
Precomposed
<display-legacy>
-
In CSS 2 wurde eine Ein-Wort-, vorgefertigte Syntax für die
display
-Eigenschaft verwendet, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten des gleichen Layout-Modus erforderte.inline-block
-
Das Element erzeugt eine Block-Box, die mit umgebendem Inhalt als eine einzige Inline-Box geflossen wird (sich ähnlich wie ein ersetzbares Element verhaltend).
Es ist äquivalent zu
inline flow-root
. inline-table
-
Der Wert
inline-table
hat keine direkte Entsprechung in HTML. Es verhält sich wie ein HTML-Element vom Typ<table>
, jedoch als Inline-Box statt als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Block-Level-Kontext.Es ist äquivalent zu
inline table
. inline-flex
-
Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Flexbox-Modell an.
Es ist äquivalent zu
inline flex
. inline-grid
-
Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Grid-Modell an.
Es ist äquivalent zu
inline grid
.
Welche Syntax sollten Sie verwenden?
Das CSS Display-Modul beschreibt eine Multi-Keyword-Syntax für Werte, die Sie mit der display
-Eigenschaft verwenden können, um äußere und innere Anzeige-Typen explizit zu definieren.
Die Ein-Wort-Werte (vorgefertigte <display-legacy>
-Werte) werden zur Rückwärtskompatibilität unterstützt.
Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt angeben:
.container {
display: inline flex;
}
Das kann auch mit dem alten einfachen Wert angegeben werden:
.container {
display: inline-flex;
}
Weitere Informationen zu diesen Änderungen finden Sie in der Anleitung Verwendung der Multi-Keyword-Syntax mit CSS-Display.
Global
/* Global values */
display: inherit;
display: initial;
display: unset;
Beschreibung
Die einzelnen Seiten für die verschiedenen Typen von Werten, die für display
festgelegt werden können, enthalten mehrere Beispiele für diese Werte in Aktion – siehe den Abschnitt Syntax. Siehe ergänzend die folgenden Materialien, die die verschiedenen Werte von display
ausführlich behandeln.
Multi-Keyword-Werte
CSS Flow Layout (display: block, display: inline)
display: flex
- Grundkonzepte von Flexbox
- Ausrichtung von Elementen in einem Flex-Container
- Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
- Beherrschung des Umbruchs von Flex-Elementen
- Anordnung von Flex-Elementen
- Beziehung von Flexbox zu anderen Layout-Methoden
- Typische Anwendungsfälle für Flexbox
display: grid
- Grundkonzepte des Grid-Layouts
- Beziehung zu anderen Layout-Methoden
- Linienbasierte Platzierung
- Grid-Template-Bereiche
- Layout mit benannten Grid-Linien
- Automatische Platzierung im Grid-Layout
- Ausrichtung von Elementen im CSS-Grid-Layout
- Grids, logische Werte und Schreibmodi
- CSS-Grid-Layout und Barrierefreiheit
- Umsetzung gängiger Layouts mit Grids
Animation der Anzeige
Unterstützende Browser animieren display
mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten 50% der Animation hin- und herwechselt.
Es gibt eine Ausnahme, wenn die Animation zu oder von display: none
erfolgt. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der animierte Inhalt während der gesamten Animation angezeigt wird. Beispielsweise:
- Beim Animieren von
display
vonnone
zublock
(oder einem anderen sichtbarendisplay
-Wert) wird der Wert bei0%
der Animationsdauer aufblock
umgeschaltet, sodass er während der gesamten Animation sichtbar ist. - Beim Animieren von
display
vonblock
(oder einem anderen sichtbarendisplay
-Wert) zunone
wird der Wert bei100%
der Animationsdauer aufnone
umgeschaltet, sodass er während der gesamten Animation sichtbar ist.
Dieses Verhalten ist nützlich, um Ein-/Ausblendeffekte zu erstellen, bei denen ein Container aus dem DOM mit display: none
entfernt werden soll, jedoch mit opacity
ausgeblendet wird, anstatt sofort zu verschwinden.
Beim Animieren von display
mit CSS-Animationen müssen Sie den Start-display
-Wert in einem expliziten Keyframe angeben (z. B. mithilfe von 0%
oder from
). Siehe Verwendung von CSS-Animationen für ein Beispiel.
Beim Animieren von display
mit CSS-Übergängen sind zwei zusätzliche Funktionen erforderlich:
@starting-style
bietet Startwerte für Eigenschaften, von denen Sie übergehen möchten, wenn das animierte Element zum ersten Mal angezeigt wird. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stil-Update eines Elements oder beim Wechsel desdisplay
-Typs vonnone
zu einem anderen Typ ausgelöst.transition-behavior: allow-discrete
muss in dertransition-property
-Deklaration (oder dertransition
-Kurzfassung) angegeben werden, umdisplay
-Übergänge zu aktivieren.
Beispiele für den Übergang der display
-Eigenschaft finden Sie auf den Seiten @starting-style
und transition-behavior
.
Barrierefreiheit
display: none
Die Verwendung eines display
-Werts von none
auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies führt dazu, dass das Element und alle seine Nachfahren nicht mehr von Screenreadern angekündigt werden.
Wenn Sie das Element visuell ausblenden möchten, ist eine barrierefreiere Alternative die Verwendung einer Kombination von Eigenschaften, um es visuell vom Bildschirm zu entfernen, es aber dennoch assistiven Technologien wie Screenreadern zugänglich zu machen.
Obwohl display: none
Inhalte aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die versteckt sind, jedoch von sichtbaren Elementen über aria-describedby
- oder aria-labelledby
-Attribute referenziert werden, assistiven Technologien zugänglich gemacht.
display: contents
Bei aktuellen Implementierungen in einigen Browsern werden Elemente mit einem display
-Wert von contents
aus dem Barrierefreiheitsbaum entfernt (aber Nachfahren bleiben erhalten). Dies führt dazu, dass das Element selbst nicht mehr von Screenreadern angekündigt wird. Dieses Verhalten entspricht jedoch nicht der CSS-Spezifikation.
Tabellen
In einigen Browsern verändert die Änderung des display
-Wertes eines <table>
-Elements auf block
, grid
oder flex
seine Darstellung im Barrierefreiheitsbaum. Dies führt dazu, dass die Tabelle nicht mehr richtig von Screenreadern angekündigt wird.
Formale Definition
Anfangswert | inline |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie der angegebene Wert, außer für positionierte und umfließende Elemente und das Wurzelelement. In beiden Fällen kann der berechnete Wert ein Schlüsselwort sein, das nicht dem angegebenen entspricht. |
Animationstyp | Discrete behavior except when animating to or from none is visible for the entire duration |
Formale Syntax
display =
[ <display-outside> || <display-inside> ] |
<display-listitem> |
<display-internal> |
<display-box> |
<display-legacy> |
<display-outside> || [ <display-inside> | math ]
<display-outside> =
block |
inline |
run-in
<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby
<display-listitem> =
<display-outside>? &&
[ flow | flow-root ]? &&
list-item
<display-internal> =
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-cell |
table-column-group |
table-column |
table-caption |
ruby-base |
ruby-text |
ruby-base-container |
ruby-text-container
<display-box> =
contents |
none
<display-legacy> =
inline-block |
inline-table |
inline-flex |
inline-grid
Beispiele
Vergleich der display-Werte
In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, mit dem Sie verschiedene display
-Werte auf die Container anwenden können, um die Auswirkungen der verschiedenen Werte auf das Layout des Elements und seiner Kinder zu vergleichen.
Wir haben padding
und background-color
auf die Container und ihre Kinder angewendet, um die Auswirkungen der Display-Werte leichter sichtbar zu machen.
HTML
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<article class="container">
<span>First</span>
<span>Second</span>
<span>Third</span>
</article>
<div>
<label for="display">Choose a display value:</label>
<select id="display">
<option selected>block</option>
<option>block flow</option>
<option>inline</option>
<option>inline flow</option>
<option>flow</option>
<option>flow-root</option>
<option>block flow-root</option>
<option>table</option>
<option>block table</option>
<option>flex</option>
<option>block flex</option>
<option>grid</option>
<option>block grid</option>
<option>list-item</option>
<option>block flow list-item</option>
<option>inline flow list-item</option>
<option>block flow-root list-item</option>
<option>inline flow-root list-item</option>
<option>contents</option>
<option>none</option>
<option>inline-block</option>
<option>inline flow-root</option>
<option>inline-table</option>
<option>inline table</option>
<option>inline-flex</option>
<option>inline flex</option>
<option>inline-grid</option>
<option>inline grid</option>
</select>
</div>
CSS
html {
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
padding-top: 10px;
}
article {
background-color: red;
}
article span {
background-color: black;
color: white;
margin: 1px;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
article,
div {
margin: 20px;
}
JavaScript
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");
function updateDisplay() {
articles.forEach((article) => {
article.style.display = select.value;
});
}
select.addEventListener("change", updateDisplay);
updateDisplay();
Ergebnis
Beachten Sie, dass einige Multi-Keyword-Werte zur Veranschaulichung hinzugefügt wurden, die folgende Entsprechungen haben:
block
=block flow
inline
=inline flow
flow
=block flow
flow-root
=block flow-root
table
=block table
flex
=block flex
grid
=block grid
list-item
=block flow list-item
inline-block
=inline flow-root
inline-table
=inline table
inline-flex
=inline flex
inline-grid
=inline grid
Weitere Beispiele finden Sie auf den Seiten für jeden separaten Anzeige-Typ unter Gruppierte Werte.
Spezifikationen
Specification |
---|
CSS Display Module Level 3 # the-display-properties |
Scalable Vector Graphics (SVG) 2 # VisibilityControl |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
display | ||||||||||||
block | ||||||||||||
contents | ||||||||||||
Specific behavior of unusual elements when display: contents is applied to them | ||||||||||||
Elements with display: contents are focusable | ||||||||||||
flex | ||||||||||||
flow-root | ||||||||||||
grid | ||||||||||||
inline | ||||||||||||
inline-block | ||||||||||||
inline-flex | ||||||||||||
inline-grid | ||||||||||||
inline-table | ||||||||||||
Transitionable when setting transition-behavior: allow-discrete | ||||||||||||
@keyframe animatable | ||||||||||||
list-item | ||||||||||||
Supported on <legend> | ||||||||||||
math | ||||||||||||
Multi-keyword values | ||||||||||||
none | ||||||||||||
Setting display: none on an <option> element hides it from the dropdown. | ||||||||||||
ruby | ||||||||||||
ruby-base | ||||||||||||
ruby-base-container | ||||||||||||
ruby-text | ||||||||||||
ruby-text-container | ||||||||||||
table | ||||||||||||
table-caption | ||||||||||||
table-cell | ||||||||||||
table-column | ||||||||||||
table-column-group | ||||||||||||
table-footer-group | ||||||||||||
table-header-group | ||||||||||||
table-row | ||||||||||||
table-row-group |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Non-standard. Check cross-browser support before using.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.