display

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 mit Schlüsselwortwerten angegeben.

Gruppierte Werte

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

Außen

<display-outside>

Diese Schlüsselwörter legen den äußeren Anzeigetyp des Elements fest, also im Wesentlichen seine Rolle im Fließlayout:

block

Das Element erzeugt eine Blockbox, die vor und 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.

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

Innen

<display-inside>

Diese Schlüsselwörter legen den inneren Anzeigetyp des Elements fest, der definiert, in welchem Formatierungskontext seine Inhalte angelegt werden (vorausgesetzt, es ist ein nicht ersetztés Element). Wenn eines dieser Schlüsselwörter allein als Einzelwert verwendet wird, ist der äußere Anzeigetyp des Elements standardmäßig block (mit Ausnahme von ruby, das standardmäßig inline ist).

flow

Das Element legt seine Inhalte im Fließlayout (Block-und-Inline-Layout) an.

Wenn sein äußerer Anzeigetyp inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, dann erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Blockbox.

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

flow-root

Das Element erzeugt eine Blockbox, die einen neuen Block-Formatierungskontext festlegt, der die Wurzel des Formats bestimmt.

table

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

flex

Das Element verhält sich wie ein Blockebene-Element und legt seinen Inhalt entsprechend dem flexbox-Modell an.

grid

Das Element verhält sich wie ein Blockebene-Element und legt seinen Inhalt entsprechend dem grid-Modell an.

ruby

Das Element verhält sich wie ein Inline-Ebene-Element und legt seinen Inhalt nach dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

Listenelement

<display-listitem>

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

Ein Einzelwert 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 Layout-Modelle wie table und ruby haben eine komplexe interne Struktur mit verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen können. Diese Sektion definiert jene "internen" Anzeigewerte, die nur innerhalb dieses speziellen Layout-Modus Bedeutung haben.

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 erzeugt.

contents

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

none

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

Vorgefertigt

<display-legacy>

CSS 2 verwendete eine Ein-Schlüsselwort, vorkomponierte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Blockebene- und Inlineebene-Varianten desselben Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Blockbox, die mit umgebendem Inhalt geflossen wird, als wäre es eine einzelne Inline-Box (verhält sich ähnlich wie ein ersetztes Element).

Es ist gleichbedeutend mit inline flow-root.

inline-table

Der inline-table-Wert hat keine direkte Entsprechung in HTML. Es verhält sich wie ein HTML-<table>-Element, jedoch als Inline-Box, statt als Blockebene-Box. Innerhalb der Tabellenbox befindet sich ein Blockebene-Kontext.

Es ist gleichbedeutend mit inline table.

inline-flex

Das Element verhält sich wie ein Inline-Ebene-Element und legt seinen Inhalt entsprechend dem Flexbox-Modell an.

Es ist gleichbedeutend mit inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Ebene-Element und legt seinen Inhalt entsprechend dem Grid-Modell an.

Es ist gleichbedeutend mit inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS-Display-Modul beschreibt eine Mehrwort-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um äußere und innere Anzeige explizit zu definieren. Die Einzel-Schlüsselwort-Werte (vorkomponierte <display-legacy>-Werte) werden aus Gründen der Rückwärtskompatibilität unterstützt.

Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container folgendermaßen angeben:

.container {
  display: inline flex;
}

Dies kann auch mit dem alten Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Verwendung der Mehrwort-Syntax mit CSS display Leitfaden.

Beschreibung

Die einzelnen Seiten für die verschiedenen Typen von Werten, die durch display gesetzt werden können, enthalten mehrere Beispiele dieser Werte in Aktion — siehe den Syntax Abschnitt. Darüber hinaus sehen Sie das folgende Material, das die verschiedenen Werte für display im Detail behandelt.

Mehrwort-Werte

• Verwendung der Mehrwort-Syntax mit CSS display

CSS Fließlayout (display: block, display: inline)

• Block- und Inline-Layout im normalen Fluss
• Fließlayout und Überlauf
• Fließlayout und Schreibrichtungen
• Einführung in Formatierungskontexte
• Im Fluss und aus dem Fluss

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Steuern der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschen von Umbrüchen bei Flex-Elementen
• Sortieren 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 Areas
• Layout mithilfe benannter Gitterlinien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibrichtungen
• CSS Grid Layout und Barrierefreiheit
• Häufige Layouts mit Grids umsetzen

Animieren von display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Das bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten um 50 % der Animation zwischen den beiden umschaltet.

Es gibt eine Ausnahme, und zwar, wenn von oder zu display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten umschalten, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wird der Wert zu block bei 0% der Animationsdauer wechseln, sodass es die ganze Zeit sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wird der Wert zu none bei 100% der Animationsdauer wechseln, sodass es die ganze Zeit sichtbar ist.

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

Wenn Sie display mit CSS-Animationen animieren, müssen Sie den Startwert display in einem expliziten Keyframe bereitstellen (zum Beispiel mit 0% oder from). Siehe Verwendung von CSS-Animationen für ein Beispiel.

Wenn Sie display mit CSS-Übergängen animieren, sind zwei zusätzliche Funktionen erforderlich:

• @starting-style liefert Startwerte für Eigenschaften, von denen Sie bei der ersten Anzeige des animierten Elements aus transponieren möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements oder beim Wechsel von display von none zu einem anderen Typ ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Kurzschreibweise) gesetzt werden, um display-Übergänge zu ermöglichen.

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

Barrierefreiheit

display: none

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies wird dazu führen, dass das Element und alle seine Nachkommenelemente nicht mehr von Bildschirmlesern angekündigt werden.

Wenn Sie das Element visuell ausblenden möchten, ist eine zugänglichere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, es aber dennoch für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

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

display: contents

Aktuelle Implementierungen in einigen Browsern entfernen alle Elemente mit einem display-Wert von contents aus dem Barrierefreiheitsbaum (aber Nachkommen bleiben). Dies wird dazu führen, dass das Element selbst nicht mehr von Bildschirmlesern angekündigt wird. Dies ist ein inkorrektes Verhalten gemäß der CSS-Spezifikation.

• Zugänglicheres Markup mit display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

Tabellen

In einigen Browsern wird durch Ändern des display-Wertes eines <table>-Elements auf block, grid oder flex seine Darstellung im Barrierefreiheitsbaum verändert. Dies führt dazu, dass die Tabelle nicht mehr richtig von Bildschirmlesern angekündigt wird.

• Kurze Anmerkung darüber, was CSS-Display-Eigenschaften mit Tabellensemantik machen — The Paciello Group
• Versteckte Inhalte für bessere Zugänglichkeit | Go Make Things
• MDN Verständnis WCAG, Leitlinie 1.3 Erklärungen
• Verstehen von Erfolgskriterium 1.3.1 | W3C Verständnis 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 der display-Werte

In diesem Beispiel haben wir zwei Blockebene-Containerelemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, mit dem Sie verschiedene display-Werte auf die Container anwenden können, um zu vergleichen und kontrastieren, wie die verschiedenen Werte das Layout des Elements und das ihrer Kinder beeinflussen.

Wir haben padding und background-color auf den Containern und ihren Kindern eingefügt, damit es einfacher ist, die Wirkung der Anzeige-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 Mehrwort-Werte zur Veranschaulichung hinzugefügt wurden, die die folgenden 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 in 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