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 von CSS legt fest, ob ein Element als Block- oder Inline-Box behandelt wird und welches Layout für dessen Kinder verwendet wird, wie z. B. Flow-Layout, Grid oder Flex.
Formal definiert die display
-Eigenschaft den Innen- und Außen-Anzeigetyp (display types) eines Elements. Der Außentyp bestimmt die Teilnahme eines Elements am Flow-Layout; der Innentyp legt das Layout der Kinder fest. Einige display
-Werte sind vollständig in ihren eigenen Spezifikationen definiert; z. B. werden die Details, die bei der Deklaration von display: flex
auftreten, im CSS Flexible Box Model definiert.
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-display
-Eigenschaft wird mit Schlüsselwortwerten angegeben.
Gruppierte Werte
Die Schlüsselwortwerte können in sechs Wertkategorien gruppiert werden.
Outside (Außerhalb)
<display-outside>
-
Diese Schlüsselwörter legen den äußeren Anzeigetyp eines Elements fest, der im Wesentlichen seine Rolle im Flow-Layout definiert:
block
-
Das Element erzeugt eine Blockbox und erzeugt sowohl vor als auch nach dem Element Zeilenumbrüche, wenn es sich in normalem Fluss befindet.
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 auf derselben Zeile platziert, sofern Platz vorhanden ist.
Hinweis:
Wenn Browser, die die Mehrfach-Schlüsselwortsyntax unterstützen, eine display
-Eigenschaft mit nur einem Außen-Wert (z. B. display: block
oder display: inline
) vorfinden, wird der Innentyp auf flow
gesetzt (z. B. display: block flow
und display: inline flow
).
Hinweis:
Um sicherzustellen, dass Layouts auf älteren Browsern funktionieren, können Sie die einwertige Syntax verwenden. Zum Beispiel könnte display: inline flex
folgende Fallback-Definition enthalten:
.container {
display: inline-flex;
display: inline flex;
}
Weitere Informationen finden Sie unter Using the multi-keyword syntax with CSS display.
Inside (Innerhalb)
<display-inside>
-
Diese Schlüsselwörter bestimmen den inneren Anzeigetyp des Elements, der definiert, welchen Formatierungskontext seine Inhalte verwenden (vorausgesetzt, es handelt sich um kein ersetztes Element):
flow
-
Das Element legt seine Inhalte mithilfe des Flow-Layouts (Block-und-Inline-Layout) aus.
Wenn sein äußerer Anzeigetyp
inline
ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Blockbox.Abhängig von den Werten anderer Eigenschaften (wie
position
,float
oderoverflow
) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den Elternformatierungskontext. flow-root
-
Das Element erzeugt eine Blockbox, die einen neuen Block-Formatierungskontext etabliert, der die Wurzeln des Formats definiert.
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 aus.
grid
-
Das Element verhält sich wie ein Block-Level-Element und legt seinen Inhalt gemäß dem Grid-Modell aus.
ruby
-
Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Ruby-Formatierungsmodell aus. Es verhält sich wie die entsprechenden HTML
<ruby>
-Elemente.
Hinweis:
Wenn Browser, die die Mehrfach-Schlüsselwortsyntax unterstützen, eine display
-Eigenschaft mit nur einem Innen-Wert (z. B. display: flex
oder display: grid
) vorfinden, wird der Außentyp auf block
gesetzt (z. B. display: block flex
und display: block grid
).
List Item (Listenelement)
<display-listitem>
-
Das Element erzeugt eine Blockbox für den Inhalt und eine separate Listenelement-Inline-Box.
Ein einzelner Wert list-item
bewirkt, dass das Element wie ein Listenelement behandelt wird. Dies kann in Kombination mit list-style-type
und list-style-position
verwendet werden.
list-item
kann auch mit jedem <display-outside>
-Schlüsselwort und dem flow
- oder flow-root
-<display-inside>
-Schlüsselwort kombiniert werden.
Hinweis:
In Browsern, die die Mehrfach-Schlüsselwortsyntax unterstützen, wird, wenn kein Innen-Wert angegeben ist, dieser standardmäßig auf flow
gesetzt.
Wenn kein Außen-Wert angegeben ist, hat die Hauptbox einen äußeren Anzeigetyp von block
.
Internal (Intern)
<display-internal>
-
Einige Layout-Modelle wie
table
undruby
haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachkommen übernehmen können. Dieser Abschnitt definiert diese "internen" Display-Werte, die nur innerhalb dieses bestimmten Layout-Modus eine 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 (Box)
<display-box>
-
Diese Werte definieren, ob ein Element überhaupt Anzeigeboxen generiert.
contents
-
Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie bitte, dass in der CSS Display Level 3-Spezifikation beschrieben wird, wie der Wert
contents
"ungewöhnliche Elemente" — Elemente, die nicht ausschließlich durch CSS-Box-Konzepte dargestellt werden, wie ersetzte Elemente — beeinflussen sollte. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details. none
-
Schaltet die Anzeige eines Elements aus, sodass es keine Auswirkungen auf das Layout hat (das Dokument wird so gerendert, als existiere das Element nicht). Alle untergeordneten Elemente haben ebenfalls ihre Anzeige deaktiviert. Wenn ein Element den Platz einnehmen soll, den es normalerweise einnähme, ohne dass tatsächlich etwas angezeigt wird, verwenden Sie stattdessen die
visibility
-Eigenschaft.
Vorzusammengesetzt
<display-legacy>
-
CSS 2 verwendete eine Ein-Schlüsselwort-vorzusammengesetzte Syntax für die
display
-Eigenschaft, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten desselben Layout-Modells erforderte.inline-block
-
Das Element erzeugt eine Blockbox, die innerhalb des umgebenden Inhalts als einzelne Inline-Box dargestellt wird (ähnlich wie bei einem ersetzten Element).
Es ist äquivalent zu
inline flow-root
. inline-table
-
Der Wert
inline-table
hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-Element vom Typ<table>
, jedoch als Inline-Box anstelle einer 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 aus.
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 aus.
Es ist äquivalent zu
inline grid
.
Welche Syntax sollten Sie verwenden?
Das CSS Display-Modul beschreibt eine Mehrfach-Schlüsselwortsyntax für Werte, die Sie mit der display
-Eigenschaft verwenden können, um den äußeren und inneren Anzeigetyp explizit zu definieren.
Die Einzel-Schlüsselwortwerte (vorgebundene <display-legacy>
-Werte) werden aus Gründen der Abwärtskompatibilität unterstützt.
Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt angeben:
.container {
display: inline flex;
}
Dies kann auch mit dem vorgebundenen Einzelwert angegeben werden:
.container {
display: inline-flex;
}
Weitere Informationen zu diesen Änderungen finden Sie im Using the multi-keyword syntax with CSS display-Leitfaden.
Global
/* Global values */
display: inherit;
display: initial;
display: unset;
Beschreibung
Die individuellen Seiten für die verschiedenen Werte, die display
-Eigenschaften annehmen können, beinhalten mehrere Beispiele dieser Werte in Aktion — siehe den Abschnitt Syntax. Darüber hinaus finden Sie die folgenden Materialien, in denen die verschiedenen Werte von display ausführlich behandelt werden.
Mehrfach-Schlüsselwert
CSS Flow-Layout (display: block, display: inline)
display: flex
display: grid
- Grundkonzepte des Grid-Layouts
- Verhältnis zu anderen Layoutmethoden
- Zeilenbasierte Platzierung
- Grid-Template-Bereiche
- Layout mit benannten Grid-Linien
- Automatische Platzierung im Grid-Layout
- Ausrichten von Elementen im CSS-Grid-Layout
- Grids, logische Werte und Schreibmodi
- CSS-Grid-Layout und Barrierefreiheit
- Verwirklichung allgemeiner Layouts mit Grids
Anzeige animieren
Unterstützende Browser animieren display
mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft während der Animation zu 50 % zwischen zwei Werten umschaltet.
Eine Ausnahme tritt auf, wenn zu oder von display: none
animiert wird. In diesem Fall schaltet der Browser zwischen den beiden Werten um, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Beispielsweise:
- Wenn
display
vonnone
zublock
(oder einem anderen sichtbarendisplay
-Wert) animiert wird, ändert sich der Wert zublock
bei0 %
der Animationsdauer, damit er die gesamte Zeit sichtbar bleibt. - Wenn
display
vonblock
(oder einem anderen sichtbarendisplay
-Wert) zunone
animiert wird, schaltet der Wert zunone
bei100 %
der Animationsdauer, damit er die gesamte Zeit sichtbar bleibt.
Dieses Verhalten ist nützlich, um Ein- und Ausstiegsanimationen zu erstellen, bei denen beispielsweise ein Container mit display: none
aus dem DOM entfernt werden soll, jedoch mit „opacity“ ausgeblendet werden soll, anstatt sofort zu verschwinden.
Wenn display
mit CSS-Animationen animiert wird, müssen Sie den Anfangswert von display
explizit in einem Schlüsselbild (z. B. mit 0 %
oder from
) angeben. Siehe Verwendung von CSS-Animationen für ein Beispiel.
Wird display
mit CSS-Transitions animiert, werden zwei zusätzliche Features benötigt:
@starting-style
bietet Anfangswerte für Eigenschaften, von denen Sie die Transition auslösen möchten, wenn das animierte Element zuerst angezeigt wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Transitions nicht durch die erste Stilaktualisierung eines Elements oder wenn derdisplay
-Typ vonnone
zu einem anderen Typ wechselt, ausgelöst.transition-behavior: allow-discrete
muss auf dertransition-property
-Deklaration (oder dertransition
-Shortcut-Definition) gesetzt werden, umdisplay
-Transitions zu aktivieren.
Beispiele für die Transition der display
-Eigenschaft finden Sie auf den Seiten @starting-style
und transition-behavior
.
Barrierefreiheit
display: none
Wenn ein display
-Wert von none
auf ein Element angewendet wird, wird dieses aus dem Barrierefreiheitsbaum entfernt. Dadurch wird das Element und alle seine Nachfahren nicht mehr von Technologien zur Bildschirmlesung angesagt.
Wenn Sie das Element visuell ausblenden möchten, ist eine barrierefreiere Alternative eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, jedoch weiterhin für unterstützende Technologien wie Bildschirmlesegeräte verfügbar zu machen.
Während display: none
Inhalt aus dem Barrierefreiheitsbaum ausblendet, bleiben Elemente, die ausgeblendet, aber von sichtbaren Elementen über aria-describedby
oder aria-labelledby
-Attribute referenziert werden, für unterstützende Technologien zugänglich.
display: contents
Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display
-Wert von contents
aus dem Barrierefreiheitsbaum (aber Nachfahren bleiben erhalten). Dadurch wird das Element selbst nicht mehr von Technologien zur Bildschirmlesung angesagt. Dieses Verhalten ist laut der CSS-Spezifikation inkorrekt.
Tabellen
In einigen Browsern führt eine Änderung des display
-Werts eines <table>
-Elements zu block
, grid
oder flex
zu einer Veränderung seiner Darstellung im Barrierefreiheitsbaum. Dadurch wird die Tabelle nicht mehr korrekt von Technologien zur Bildschirmlesung angesagt.
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 von display-Werten
In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, von denen jedes drei Inline-Kinder enthält. Darunter befindet sich ein Auswahlmenü, mit dem Sie verschiedene display
-Werte auf die Container anwenden können, um die Auswirkungen der unterschiedlichen 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 besser zu veranschaulichen.
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 Mehrfach-Schlüsselwertäquivalente der Illustration hinzugefügt wurden:
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 Anzeigetyp unter Gruppierte Werte.
Spezifikationen
Specification |
---|
CSS Display Module Level 3 # the-display-properties |
Scalable Vector Graphics (SVG) 2 # VisibilityControl |
Browser-Kompatibilität
BCD tables only load in the browser