display

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* Box suppression */
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 unter Verwendung von Schlüsselwortwerten angegeben.

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

<display-outside>

Diese Schlüsselwörter spezifizieren den äußeren Displaytyp des Elements, was im Wesentlichen seine Rolle im Fluss-Layout ist:

block

Das Element generiert eine Blockbox, die sowohl vor als auch nach dem Element Zeilenumbrüche erzeugt, wenn es im normalen Fluss ist.

inline

Das Element erzeugt eine oder mehrere Inline-Boxen, die weder vor noch nach sich selbst 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;
}

<display-inside>

Diese Schlüsselwörter geben den inneren Displaytyp des Elements an, der den Typ des Formatierungskontexts definiert, in dem seine Inhalte layoutiert werden (vorausgesetzt, es handelt sich um ein nicht ersetztes Element):

flow

Das Element layoutiert seine Inhalte unter Verwendung des Flusslayouts (Block-und-Inline-Layout).

Wenn sein äußerer Displaytyp 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 oder overflow) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in seinen übergeordneten Formatierungskontext.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext etabliert und bestimmt, wo die Formatierungsschicht liegt.

table

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

flex

Das Element verhält sich wie ein Blockebenen-Element und layoutiert seinen Inhalt gemäß dem Flexbox-Modell.

grid

Das Element verhält sich wie ein Blockebenen-Element und layoutiert seinen Inhalt gemäß dem Grid-Modell.

ruby

Das Element verhält sich wie ein Inline-Element und layoutiert seinen Inhalt gemäß dem Ruby-Formatierungsmodell. Es verhält sich wie die entsprechenden HTML <ruby> Elemente.

<display-listitem>

Das Element generiert eine Block-Box für den Inhalt und eine separate Listenitems-Inline-Box.

Ein einzelner Wert von list-item verursacht, dass das Element sich wie ein Listenpunkt 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.

<display-internal>

Einige Layoutmodelle wie table und ruby haben eine komplexe innere Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachfahren füllen können. Dieser Abschnitt definiert diese "internen" Anzeigewerte, die nur innerhalb dieses speziellen Layoutmodus 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.

<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 Kinderboxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3-Spezifikation definiert, wie der contents-Wert sich auf "ungewöhnliche Elemente" auswirken sollte – Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie z.B. ersetzte Elemente. Weitere Details finden Sie in Anhang B: Effects of display: contents on Unusual Elements.

none

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

<display-legacy>

CSS 2 verwendete eine Ein-Schlüsselwort, vorgefertigte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für block- und inline-Ebenenvarianten desselben Layoutmodus erforderte.

inline-block

Das Element erzeugt eine Block-Box, die mit dem umgebenden Inhalt so geflossen wird, als ob sie eine einzelne Inline-Box wäre (sich wie ein ersetztes Element verhalten würde).

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, anstatt einer Blockebenen-Box. Innerhalb der Table-Box befindet sich ein Block-Ebenen-Kontext.

Es ist gleichbedeutend mit inline table.

inline-flex

Das Element verhält sich wie ein Inline-Element und layoutiert seinen Inhalt gemäß dem Flexbox-Modell.

Es ist gleichbedeutend mit inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Element und layoutiert seinen Inhalt gemäß dem Grid-Modell.

Es ist gleichbedeutend mit inline grid.

Das CSS Display Modul beschreibt eine Mehrfach-Schlüsselwort-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um explizit äußere und innere Displaywerte zu definieren. Die Einzel-Schlüsselwort-Werte (vorgefertigte <display-legacy> Werte) werden für die Abwä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 mehr Informationen über diese Änderungen siehe den Using the multi-keyword syntax with CSS display-Leitfaden.

Die einzelnen Seiten für die verschiedenen Werttypen, die auf display gesetzt werden können, enthalten mehrere Beispiele dieser Werte in Aktion — siehe den Syntax Abschnitt. Außerdem finden Sie das folgende Material, das die verschiedenen Werte von Display ausführlich behandelt.

• Using the multi-keyword syntax with CSS display

• Block and inline layout in normal flow
• Flow layout and overflow
• Flow layout and writing modes
• Introduction to formatting contexts
• In flow and out of flow

• Basic concepts of flexbox
• Aligning items in a flex container
• Controlling ratios of flex items along the main axis
• Mastering wrapping of flex items
• Ordering flex items
• Relationship of flexbox to other layout methods
• Typical use cases of flexbox

• Basic concepts of grid layout
• Relationship to other layout methods
• Line-based placement
• Grid template areas
• Layout using named grid lines
• Auto-placement in grid layout
• Aligning items in CSS grid layout
• Grids, logical values and writing modes
• CSS grid layout and accessibility
• Realizing common layouts using grids

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

Es gibt eine Ausnahme, wenn zu oder von display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten umschalten, sodass der animierte Inhalt für die gesamte Dauer der Animation angezeigt wird. Zum Beispiel:

• Bei der Animation von display von none zu block (oder einem anderen sichtbaren display-Wert) wird der Wert bei 0% der Animationsdauer auf block umgeschaltet, sodass er während der gesamten Animation sichtbar ist.
• Bei der Animation von display von block (oder einem anderen sichtbaren display-Wert) zu none wird der Wert bei 100% der Animationsdauer auf none umgeschaltet, sodass er während der gesamten Animation sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Ausblendeffekte zu erstellen, bei denen Sie z.B. ein Container-Element mit display: none aus dem DOM entfernen möchten, aber es mit opacity ausblenden, anstatt es sofort verschwinden zu lassen.

Wenn display mit CSS-Animationen animiert wird, müssen Sie den Startwert display in einem expliziten Keyframe angeben (z.B. unter Verwendung von 0% oder from). Siehe Using CSS animations für ein Beispiel.

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

• @starting-style stellt Startwerte für Eigenschaften bereit, von denen Sie beim ersten Anzeigen des animierten Elements ausgehend eine Übergangswirkung erzielen möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stil-Update eines Elements oder wenn der display-Typ von none zu einem anderen Typ geändert wird, aktiviert.
• transition-behavior: allow-discrete muss auf der transition-property-Deklaration (oder im transition-Kurzschreibweise) gesetzt werden, um display-Übergänge zu ermöglichen.

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

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Accessibility-Tree. Dies führt dazu, dass das Element und alle seine Nachfahrelemente nicht mehr durch Bildschirmlesetechnologien angekündigt werden.

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, aber trotzdem für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

Während display: none Inhalte aus dem Accessibility-Tree ausblendet, werden Elemente, die ausgeblendet sind, aber von sichtbaren Elementen mit den Attributen aria-describedby oder aria-labelledby referenziert werden, dennoch von unterstützenden Technologien erkannt.

Aktuelle Implementierungen in einigen Browsern entfernen aus dem Accessibility-Tree jedes Element mit einem display-Wert von contents (aber Nachfahren bleiben bestehen). Dies führt dazu, dass das Element selbst nicht mehr von Bildschirmlesetechnologien angekündigt wird. Dies ist ein fehlerhaftes Verhalten gemäß der CSS-Spezifikation.

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

In einigen Browsern wird durch das Ändern des display-Werts eines <table>-Elements zu block, grid oder flex deren Darstellung im Accessibility-Tree verändert. Dies führt dazu, dass die Tabelle nicht mehr richtig durch Bildschirmlesetechnologien angekündigt wird.

• Kurze Notiz, was CSS-Anzeigewerte mit der Tabellensemantik machen — The Paciello Group
• Versteckter Inhalt für bessere A11Y | Go Make Things
• MDN Verständnis WCAG, Leitfaden 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis WCAG 2.0

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   

In diesem Beispiel haben wir zwei Blockcontainer-Elemente, jeweils mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, das Ihnen ermöglicht, verschiedene display-Werte auf die Container anzuwenden, sodass Sie vergleichen können, wie sich die verschiedenen Werte auf das Layout des Elements und das seiner Kinder auswirken.

Wir haben padding und background-color auf den Containern und ihren Kindern hinzugefügt, damit es einfacher ist, den Effekt 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 Mehrfach-Schlüsselwortwerte zur Illustration 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

Sie können weitere Beispiele auf den Seiten für jeden separaten Anzeigetyp unter Gruppierte Werte finden.

• visibility, float, position
• grid, flex
• SVG display Attribut
• Block and inline layout in normal flow
• Introduction to formatting contexts