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

Gruppierte Werte

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

Outside

<display-outside>

Diese Schlüsselwörter geben den äußeren Display-Typ des Elements an, der im Wesentlichen seine Rolle im Flow-Layout ist:

block

Das Element erzeugt eine Block-Box, die sowohl vor als auch nach dem Element im normalen Fluss Zeilenumbrüche 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;
}

Inside

<display-inside>

Diese Schlüsselwörter geben den inneren Display-Typ des Elements an, der den Typ des Formatierungskontextes festlegt, in dem seine Inhalte ausgelegt sind (vorausgesetzt, es handelt sich um ein nicht-ersetztes Element). Wenn eines dieser Schlüsselwörter alleine als Einzelwert verwendet wird, wird der äußere Display-Typ des Elements auf block festgelegt (mit der Ausnahme von ruby, das auf inline voreingestellt ist).

flow

Das Element legt seine Inhalte mit einem Flow-Layout (Block-und-Inline-Layout) aus.

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 ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, kann es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte schaffen oder seine Inhalte in seinen übergeordneten Formatierungskontext integrieren.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext erstellt und definiert, 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 Block-Level-Element und legt seine Inhalte gemäß dem Flexbox-Model aus.

grid

Das Element verhält sich wie ein Block-Level-Element und legt seine Inhalte gemäß dem Grid-Model aus.

ruby

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

List Item

<display-listitem>

Das Element erzeugt eine Block-Box für den Inhalt und eine separate Listen-Element-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 den flow oder flow-root <display-inside>-Schlüsselwörtern kombiniert werden.

Internal

<display-internal>

Einige Layout-Modelle wie table und ruby haben eine komplexe interne Struktur, mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen füllen können. Dieser Abschnitt definiert die "internen" Anzeige-Werte, 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 generiert.

ruby-text-container

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

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Anzeige-Boxen erzeugt.

contents

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

none

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

Precomposed

<display-legacy>

CSS 2 verwendete eine einzelne Keyword-, vorkomponierte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten desselben Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Block-Box, die mit dem umliegenden Inhalt fließt, als ob es eine einzelne Inline-Box wäre (ähnlich wie ein ersetztes 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, aber als Inline-Box und nicht 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 seine Inhalte gemäß dem Flexbox-Model aus.

Es ist äquivalent zu inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und legt seine Inhalte gemäß dem Grid-Model aus.

Es ist äquivalent zu inline grid.

Welches 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 explizit äußere und innere Anzeige zu definieren. Die Einzel-Schlüsselwort-Werte (vorkomponierte <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 Legacy-Einzelwert spezifiziert werden:

.container {
  display: inline-flex;
}

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

Beschreibung

Die einzelnen Seiten für die verschiedenen Typen von Werten, die bei display festgelegt werden können, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Abschnitt Syntax. Darüber hinaus sehen Sie das folgende Material, das die verschiedenen Anzeige-Werte ausführlich behandelt.

Multi-Keyword-Werte

• Verwendung der Multi-Keyword-Syntax mit CSS display

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

• Block- und Inline-Layout im normalen Fluss
• Flow-Layout und Überlauf
• 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
• Steuern der Verhältnisse von Flex-Artikeln entlang der Hauptachse
• Beherrschen des Umbruchs von Flex-Artikeln
• Ordnen von Flex-Artikeln
• Verhältnis von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Verhältnis zu anderen Layout-Methoden
• Zeilenbasierte 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
• Verwirklichung gängiger Layouts mit Grids

Anzeige animieren

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten 50 % durch die Animation zwischen den beiden umkippt.

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 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 bei 0% der Animationsdauer zu block wechseln, sodass er während der gesamten Dauer sichtbar bleibt.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wird der Wert bei 100% der Animationsdauer zu none wechseln, sodass er während der gesamten Dauer sichtbar bleibt.

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

Beim Animieren von display mit CSS-Animationen müssen Sie den anfänglichen display-Wert in einem expliziten Keyframe bereitstellen (zum Beispiel mit 0% oder from). Weitere Informationen finden Sie unter Verwendung von CSS-Animationen.

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

• @starting-style bietet Startwerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements überblenden möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht beim ersten Stil-Update oder beim Ändern des display-Typs von none auf einen anderen Typ ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder dem transition-Shorthand) gesetzt werden, um display-Übergänge zu ermöglichen.

Beispiele für die Übergang der display-Eigenschaft finden Sie auf den Seiten @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies bewirkt, dass das Element und alle seine Nachkommenelemente nicht mehr von Bildschirmlesetechnologien angekündigt werden.

Wenn Sie das Element visuell verbergen möchten, ist eine barrierefreiere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell von der Anzeige zu entfernen, aber dennoch für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

Während display: none den Inhalt aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die verborgen 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 aus dem Barrierefreiheitsbaum alle Elemente mit einem display-Wert von contents (aber Nachkommen bleiben). Dies bewirkt, dass das Element selbst nicht mehr von Bildschirmlesetechnologien angekündigt wird. Dies ist laut der CSS-Spezifikation ein inkorrektes Verhalten.

• Mehr zugängliches Markup mit display: contents | Hidde de Vries
• Display: Contents ist kein CSS-Reset | Adrian Roselli

Tabellen

In einigen Browsern wird durch Ändern des display-Werts eines <table>-Elements in block, grid oder flex die Darstellung im Barrierefreiheitsbaum geändert. Dies bewirkt, dass die Tabelle nicht mehr korrekt von Bildschirmlesetechnologien angekündigt wird.

• Kurze Notiz darüber, was CSS-Anzeigeeigenschaften mit Tabellen-Semantik machen — Die Paciello Group
• Versteckter Inhalt für bessere a11y | Go Make Things
• MDN Verständnis von WCAG, Guideline 1.3 Erläuterungen
• Verständnis der Erfolgs-Kriterium 1.3.1 | W3C Verständnis von WCAG 2.0

Formalde 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-Wert Vergleich

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

Wir haben padding und background-color auf die Container und ihre Kinder angewandt, damit es einfacher ist, den Effekt 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 Multi-Keyword-Werte 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

Weitere Beispiele finden Sie auf den Seiten für jeden separaten Displaytyp 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