display CSS property

Probieren Sie es aus

display: block;

display: inline flow-root;

display: none;

display: flex;

display: grid;

<p>
  Apply different <code>display</code> values on the dashed orange-bordered
  <code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
  <div class="example-container">
    Some text A.
    <div id="example-element">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
    </div>
    Some text B.
  </div>
</section>

.example-container {
  width: 100%;
  height: 100%;
}

code {
  background: #88888888;
}

#example-element {
  border: 3px dashed orange;
}

.child {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #ccccff;
  border: 1px solid #ababab;
  color: black;
}

Syntax

/* short display */
display: none;
display: contents;
display: block;
display: flow-root;
display: inline;
display: inline-block;
display: list-item;
display: inline list-item;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: table;
display: inline-table;

/* full display */
display: block flow;
display: block flow-root;
display: inline flow;
display: inline flow-root;
display: block flow list-item;
display: inline flow list-item;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block table;
display: inline table;

/* global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Die CSS display-Eigenschaft wird mithilfe von Schlüsselwortwerten angegeben.

Gruppierte Werte

Die Schlüsselwortwerte können in sechs Wertkategorien gruppiert werden.

Außen

<display-outside>

Diese Schlüsselwörter geben den äußeren Anzeigetyp des Elements an, 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 auf derselben Zeile sein, wenn Platz vorhanden ist.

.container {
  display: inline-flex;
  display: inline flex;
}

Innen

<display-inside>

Diese Schlüsselwörter geben den inneren Anzeigetyp des Elements an, der den Formatierungskontext definiert, in dem seine Inhalte layoutet werden (angenommen, es handelt sich um ein nicht ersetztes Element). Wenn eines dieser Schlüsselwörter alleine als einzelner Wert verwendet wird, ist der äußere Anzeigetyp des Elements standardmäßig block (mit Ausnahme von ruby, das standardmäßig inline ist).

flow

Das Element layoutet seine Inhalte mithilfe des Flow-Layouts (Block-und-Inline-Layout).

Wenn der äußere Anzeigetyp inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, generiert es eine Inline-Box. Andernfalls generiert es eine Block-Box.

Abhängig vom Wert anderer Eigenschaften (wie position, float oder overflow) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen Blockformatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den übergeordneten Formatierungskontext.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Blockformatierungskontext etabliert, der festlegt, wo die Formatierungswurzel liegt.

table

Diese Elemente verhalten sich wie HTML-<table>-Elemente. Es definiert eine Block-Level-Box.

flex

Das Element verhält sich wie ein Element auf Block-Level und layoutet seine Inhalte gemäß dem Flexbox-Modell.

grid

Das Element verhält sich wie ein Element auf Block-Level und layoutet seine Inhalte gemäß dem Grid-Modell.

ruby

Das Element verhält sich wie ein Inline-Level-Element und layoutet seine Inhalte gemäß dem Ruby-Formatierungsmodell. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

Listenelement

<display-listitem>

Das Element erzeugt eine Block-Box für den Inhalt und eine separate Listenelement-Inline-Box.

Ein einzelner Wert von list-item bewirkt, dass sich das Element 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 flow oder flow-root <display-inside>-Schlüsselwort kombiniert werden.

Intern

<display-internal>

Einige Layoutmodelle wie table und ruby haben eine komplexe interne Struktur mit mehreren unterschiedlichen Rollen, die ihre Kinder und Nachkommen einnehmen können. Dieser Abschnitt definiert die sogenannten "internen" Anzeige-Werte, die nur innerhalb dieses besonderen Layoutmodus Sinn ergeben.

table-row-group

Diese Elemente verhalten sich wie <tbody>-HTML-Elemente.

table-header-group

Diese Elemente verhalten sich wie <thead>-HTML-Elemente.

table-footer-group

Diese Elemente verhalten sich wie <tfoot>-HTML-Elemente.

table-row

Diese Elemente verhalten sich wie <tr>-HTML-Elemente.

table-cell

Diese Elemente verhalten sich wie <td>-HTML-Elemente.

table-column-group

Diese Elemente verhalten sich wie <colgroup>-HTML-Elemente.

table-column

Diese Elemente verhalten sich wie <col>-HTML-Elemente.

table-caption

Diese Elemente verhalten sich wie <caption>-HTML-Elemente.

ruby-base

Diese Elemente verhalten sich wie <rb>-HTML-Elemente.

ruby-text

Diese Elemente verhalten sich wie <rt>-HTML-Elemente.

ruby-base-container

Diese Elemente werden als anonyme Boxen generiert.

ruby-text-container

Diese Elemente verhalten sich wie <rtc>-HTML-Elemente.

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Anzeigeboxen generiert.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudobox und ihre Kindboxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3-Spezifikation beschreibt, wie sich der contents-Wert auf "ungewöhnliche Elemente" auswirken soll — Elemente, die nicht rein durch CSS-Boxen-Konzepte wie ersetzte Elemente gerendert werden. Siehe Appendix B: Effects of display: contents on Unusual Elements für weitere Details.

none

Schaltet die Anzeige eines Elements aus, sodass es keine Auswirkung auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existierte). Alle Nachkommenelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, aber ohne tatsächlich etwas darzustellen, verwenden Sie stattdessen die visibility-Eigenschaft.

Vorgefertigt

<display-legacy>

In CSS 2 wurde eine einheitliche Schlüsselwortsyntax für die display-Eigenschaft verwendet, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten des gleichen Layoutmodells erforderte.

inline-block

Das Element erzeugt eine Block-Box, die zusammen mit dem umgebenden Inhalt wie eine einzige Inline-Box behandelt wird (verhält sich ähnlich wie ein ersetztes Element würde).

Es ist gleichbedeutend mit inline flow-root.

inline-table

Der inline-table-Wert hat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML-<table>-Element, jedoch als Inline-Box und nicht als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Block-Level-Kontext.

Es ist gleichbedeutend mit inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-Element und layoutet seine Inhalte gemäß dem Flexbox-Modell.

Es ist gleichbedeutend mit inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und layoutet seine Inhalte gemäß dem Grid-Modell.

Es ist gleichbedeutend mit 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 explizit zu definieren. Die Einzelwert-Schlüsselwörter (vorgefertigte <display-legacy>-Werte) werden für die Rückwärtskompatibilität unterstützt.

Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt spezifizieren:

.container {
  display: inline flex;
}

Dies kann auch mit dem veralteten Einzelwert spezifiziert werden:

.container {
  display: inline-flex;
}

Für weitere Informationen zu diesen Änderungen siehe den Using the multi-keyword syntax with CSS display Leitfaden.

Beschreibung

Die einzelnen Seiten für die unterschiedlichen Werttypen, die die display-Eigenschaft haben kann, zeigen mehrere Beispiele dieser Werte in Aktion – siehe den Syntax Abschnitt. Zusätzlich sehen Sie das folgende Material, das die verschiedenen Werte von Display ausführlich behandelt.

Multi-Schlüsselwort-Werte

• Using the multi-keyword syntax with CSS display

CSS Flow Layout (display: block, display: inline)

• Block- und Inline-Layout im normalen Fluss
• Flow-Layout und Overflow
• Flow-Layout und Schreibmodi
• Einführung in Formatierungskontexte
• Im Fluss und außerhalb des Flusses

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Kontrollieren der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Meistern der Umbrüche von Flex-Elementen
• Sortieren von Flex-Elementen
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Grid-Linien
• Auto-Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Realisieren von häufigen Layouts mit Grids

Animieren der Anzeige

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft während der Animation zwischen zwei Werten um 50 % durch die Animation wechseln wird.

Es gibt eine Ausnahme, wenn zu oder von display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten wechseln, sodass der animierte Inhalt über die gesamte Animationsdauer angezeigt wird. Beispielsweise:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wechselt der Wert bei 0 % der Animationsdauer zu block, sodass er während der gesamten Zeit sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert bei 100 % der Animationsdauer zu none, sodass er während der gesamten Zeit sichtbar ist.

Dieses Verhalten ist nützlich, um Eintritts-/Austrittsanimationen zu erstellen, bei denen Sie beispielsweise einen Container mit display: none aus dem DOM entfernen möchten, aber mit opacity ausblenden, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen, müssen Sie den startenden display-Wert in einem expliziten Keyframe bereitstellen (z. B. mit 0 % oder from). Siehe Verwendung von CSS-Animationen für ein Beispiel.

Beim Animieren von display mit CSS-Übergängen, sind zwei zusätzliche Features erforderlich:

• @starting-style bietet Startwerte für Eigenschaften, von denen Sie während des ersten Stylings des animierten Elements wechseln möchten. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht ausgelöst, wenn ein Element das erste Mal seinen Stil ändert oder wenn der display-Typ von none in einen anderen Typ wechselt.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Verkürzung) gesetzt werden, um display-Übergänge zu ermöglichen.

Für Beispiele zum Übergang der display-Eigenschaft siehe die Seiten zu @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies hat zur Folge, dass das Element und alle seine Nachkommenelemente nicht mehr von Technologien zur Vorlesung von Bildschirmen angekündigt werden.

Wenn Sie das Element visuell verstecken möchten, ist eine zugänglichere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, es jedoch weiterhin zugänglich für unterstützende Technologie wie Bildschirmvorleser zu machen.

Während display: none Inhalte aus dem Barrierefreiheitsbaum entfernt, werden Elemente, die verborgen sind, aber von sichtbaren Elementen über aria-describedby oder aria-labelledby-Attribute referenziert werden, zu unterstützenden Technologien zugänglich gemacht.

display: contents

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents aus dem Barrierefreiheitsbaum (aber Nachkommen bleiben bestehen). Dies führt dazu, dass das Element selbst nicht mehr von Technologien zur Vorlesung von Bildschirmen angekündigt wird. Dies ist ein inkorrektes Verhalten laut der CSS-Spezifikation.

• Barrierefreieres Markup mit display: contents | Hidde de Vries
• Display: Contents ist kein CSS-Reset | Adrian Roselli

Tabellen

In einigen Browsern wird durch das Ändern des display-Werts eines <table>-Elements zu block, grid oder flex dessen Darstellung im Barrierefreiheitsbaum geändert. Dies hat zur Folge, dass die Tabelle nicht mehr richtig von Technologien zur Vorlesung von Bildschirmen angekündigt wird.

• Verborgene Inhalte für bessere Barrierefreiheit | Go Make Things
• MDN Verständnis von WCAG, Leitlinie 1.3 Erklärungen
• Verstehen des Erfolgskriteriums 1.3.1 | W3C Verständnis von WCAG 2.0

Formale Definition

Formale Syntax

display = 
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  grid-lanes                                        |
  inline-grid-lanes                                 |
  ruby                                              |
  ruby-base                                         |
  ruby-text                                         |
  ruby-base-container                               |
  ruby-text-container                               |
  <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, jedes mit drei Inline-Kindern. Darunter befindet sich ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, um zu vergleichen und zu kontrastieren, wie sich die verschiedenen Werte auf das Layout des Elements und der Kinder auswirken.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, den Einfluss der Display-Werte zu sehen.

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-Schlüsselwort-Werte zur Veranschaulichung hinzugefügt wurden, die folgende Äquivalente 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 Anzeigetyp unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• visibility, float, position
• grid, flex
• CSS-Ruby-Layout Modul
• SVG display Attribut
• Block- und Inline-Layout im normalen Fluss
• Einführung in Formatierungskontexte