display

Probieren Sie es aus

display: block;

display: inline-block;

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

/* 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 display-Eigenschaft wird durch Schlüsselwortwerte 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, was im Wesentlichen seine Rolle im Fluss-Layout ist:

block

Das Element erzeugt eine Blockbox und erzeugt Zeilenumbrüche sowohl vor als auch nach dem Element im normalen Fluss.

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 der gleichen Zeile platziert, 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 den Typ des Formatierungskontexts definiert, in dem seine Inhalte ausgelegt sind (vorausgesetzt, es handelt sich um ein nicht ersetzbares 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 legt seinen Inhalt mittels Fluss-Layout (Block-und-Inline-Layout) an.

Wenn der äußere Anzeigetyp inline ist und es in 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 beteiligt ist, etabliert es entweder einen neuen Block-Formatierungskontext (BFC) für seinen Inhalt oder integriert seinen Inhalt in den Formatierungskontext seines Elternteils.

flow-root

Das Element erzeugt eine Blockbox, die einen neuen Block-Formatierungskontext etabliert und definiert, wo sich der Formatierungsursprung befindet.

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.

Listenelement

<display-listitem>

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

Ein Einzelwert von list-item führt dazu, 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 mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen ausfüllen können. Dieser Abschnitt definiert jene "internen" Anzeigewerte, die nur innerhalb dieses bestimmten 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 erzeugt.

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 erzeugen keine spezifische Box für sich. Sie werden durch ihre Pseudobox und ihre Kindboxen ersetzt. Beachten Sie, dass die CSS Display Level 3 Spezifikation beschreibt, wie der Wert contents "ungewöhnliche Elemente" beeinflussen sollte – Elemente, die nicht vollständig durch CSS-Box-Konzepte wie ersetzbare Elemente gerendert werden. Siehe Anhang B: Effekte von display: contents auf ungewöhnliche Elemente für weitere Details.

none

Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird dargestellt, als ob das Element nicht existiert). Alle Nachkommenelemente werden ebenfalls nicht angezeigt. Um den Platz, den ein Element normalerweise einnehmen würde, ohne tatsächlich etwas darzustellen, zu belegen, verwenden Sie stattdessen die visibility-Eigenschaft.

Vorgefertigt

<display-legacy>

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

inline-block

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

Es ist äquivalent zu 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 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 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 Ein-Wort-Werte (vorgefertigte <display-legacy>-Werte) werden aus Kompatibilitätsgründen 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 vorgefertigten Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Für weitere Informationen zu diesen Änderungen siehe den Verwendung der Multi-Keyword-Syntax mit CSS display-Leitfaden.

Beschreibung

Die individuellen Seiten für die verschiedenen Arten von Werten, die display gesetzt haben kann, enthalten mehrere Beispiele dieser Werte in Aktion – siehe den Syntax-Abschnitt. Außerdem siehe das folgende Material, das die verschiedenen Werte von display ausführlich behandelt.

Multi-Keyword-Werte

• Verwendung der Multi-Keyword-Syntax mit CSS display

CSS-Fluss-Layout (display: block, display: inline)

• Block- und Inline-Layout im normalen Fluss
• Fluss-Layout und Überlauf
• Fluss-Layout und Schreibmodi
• Einführung in Formatierungskontexte
• Im Fluss und aus dem Fluss

display: flex

• Grundkonzepte von Flexbox
• Ausrichtung von Elementen in einem Flex-Container
• Verhältnis von Flex-Elementen entlang der Hauptachse steuern
• Beherrschung des Umbruchs von Flex-Elementen
• Anordnung von Flex-Elementen
• Beziehung von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layout-Methoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Gitterlinien
• Automatische Platzierung im Grid-Layout
• Ausrichtung von Elementen im CSS-Grid-Layout
• Gitter, logische Werte und Schreibmodi
• CSS-Grid-Layout und Zugänglichkeit
• Umsetzung gängiger Layouts mit Grids

Animationen für Display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten 50% der Animationszeit wechselt.

Es gibt eine Ausnahme, nämlich wenn die Animation zu oder von display: none wechselt. In diesem Fall wechselt der Browser zwischen den zwei Werten, 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, wechselt der Wert zu block bei 0% der Animationsdauer, sodass er die ganze Zeit sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert zu none bei 100% der Animationsdauer, sodass er die gesamte Zeit sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Ausblendeanimationen zu erstellen, bei denen Sie z. B. einen Container mit display: none aus dem DOM entfernen möchten, ihn jedoch mit opacity ausblenden, anstatt sofort zu verschwinden.

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

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

• @starting-style bietet Startwerte für Eigenschaften, von denen Sie beim erstmaligen Anzeigen des animierten Elements einen Übergang wünschen. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements oder wenn sich der display-Typ von none in einen anderen Typ ändert, ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Kurzform) gesetzt werden, um display-Übergänge zu ermöglichen.

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

Zugänglichkeit

display: none

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Zugänglichkeitsbaum. Dies wird dazu führen, dass das Element und alle seine Nachkommenelemente nicht mehr von Bildschirmlesetechnologie angesagt 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 dennoch für Hilfstechnologie wie Bildschirmleser verfügbar zu machen.

Während display: none Inhalte aus dem Zugänglichkeitsbaum entfernt, werden Elemente, die verborgen sind, aber von sichtbaren Elementen in ihren aria-describedby oder aria-labelledby-Attributen referenziert werden, Hilfstechnologien zugänglich gemacht.

display: contents

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

• Barrierefreies Markup mit display: contents | Hidde de Vries
• Display: Contents is not a CSS Reset | Adrian Roselli

Tabellen

In einigen Browsern ändert sich die Darstellung im Zugänglichkeitsbaum eines <table>-Elements, wenn der display-Wert auf block, grid oder flex geändert wird. Dies führt dazu, dass die Tabelle nicht mehr korrekt von Bildschirmlesetechnologie angekündigt wird.

• Kurze Notiz darüber, was CSS-Anzeigeeigenschaften mit Tabellensemantik tun — The Paciello Group
• Verborgener Inhalt für bessere A11Y | Go Make Things
• MDN Verständnis von WCAG, Leitfaden 1.3 Erklärungen
• Verständnis von Erfolgskriterium 1.3.1 | W3C Understanding WCAG 2.0

Formale Definition

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

display-Wertvergleich

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

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, den Effekt der Anzeige-Werte zu erkennen.

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 zu Illustrationszwecken 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 zu den einzelnen Anzeigetypen unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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