CSS-Display-Eigenschaft
Die Eigenschaft display definiert den Typ des Kastens, der für ein HTML-Element verwendet wird.
Mit der Eigenschaft display können wir den Anfangswert eines Elements überschreiben. Zum Beispiel kann ein Element auf Blockebene als Inline-Element dargestellt werden, indem der Wert "inline" angegeben wird. In älteren CSS-Spezifikationen akzeptierte ein Inline-Element die Eigenschaften height und width nicht, um seine Abmessungen oder die Höhe der Zeilenbox zu ändern. Modernes CSS unterstützt diese Eigenschaften jedoch vollständig für Inline-Elemente, und sie beeinflussen das Layout.
In HTML werden die Standardwerte der Eigenschaft display aus den Verhaltensweisen übernommen, die in den HTML-Spezifikationen beschrieben sind, oder aus dem Standard-Stylesheet des Browsers bzw. des Benutzers. Der Standardwert in XML ist hingegen "inline".
Es gibt mehrere wichtige Box-Formate in CSS:
- Inline
Inline-Elemente oder Inline-Elemente auf Inline-Ebene sind Kästen, die in einer Zeile fließen, ohne sie zu unterbrechen. Die Elemente<span>,<em>und<img>sind Teil einer Zeilenbox, können aber keinen Zeilenumbruch verursachen. Inline-Elemente können Padding und Margins haben, aber das Festlegen von width und height ändert in älteren CSS-Spezifikationen nicht ihre Abmessungen oder die Höhe der Zeilenbox. Modernes CSS unterstützt diese Eigenschaften für Inline-Elemente vollständig, und sie beeinflussen das Layout. Das Festlegen von Padding und Margins am Element verschiebt die anderen Elemente in der Zeile nur horizontal. Ein Inline-Element kann jedoch width und height annehmen, wenn es mithilfe der Eigenschaftdisplayals Inline-Block-Element festgelegt wird. - Inline-block
Inline-Block-Elemente sind dasselbe wie Inline-Elemente, außer dass sie width und height akzeptieren. Die width und height verschieben die Elemente in der Zeile sowohl horizontal als auch vertikal. - Block
Block-Kästen oder Elemente auf Blockebene stehen nicht in einer Zeilenbox, sondern brechen aus ihr heraus. Standardmäßig nehmen sie so viel horizontalen Platz wie möglich ein. Elemente auf Blockebene können andere Elemente auf Blockebene enthalten. Die Elemente<p>,<ul>,<h1>-<h6>,<div>,<section>und<ol>sind Beispiele für Elemente auf Blockebene. - Flex
Die Eigenschaftdisplaywird auch für Flexbox verwendet. Der Wertflexerzeugt einen Block-Level-Kasten für das Element und ordnet den Inhalt gemäß dem Flexbox-Modell an. Hier können Sie über Der ultimative Leitfaden zu Flexbox. lesen - Grid
Die Eigenschaftdisplaylegt zunächst das Grid-Layout fest. Sie erzeugt einen Block-Level-Kasten für das Element und ordnet den Inhalt gemäß dem Grid-Modell an. - Table Values
Display-Werte ermöglichen es Ihnen, Nicht-Tabellen-Elemente wie Tabellenelemente verhalten zu lassen. Jeder der Tabellenwerte zwingt das Element, sich wie das entsprechende Tabellenelement in HTML zu verhalten.inline-tableverhält sich wie ein HTML-Element<table>, jedoch als Inline-Box. Innerhalb der Tabellenbox gibt es einen Kontext auf Blockebene.
| Initial Value | - |
|---|---|
| Applies to | All elements. |
| Inherited | No |
| Animatable | No |
| Version | CSS1 |
| DOM Syntax | object.style.display = "list-item"; |
Syntax
Syntax der CSS-Eigenschaft display
css
display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;Beispiel für die Eigenschaft display:
Beispiel der CSS-Eigenschaft display mit dem Wert inline
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.display li {
display: inline;
margin-right: 10px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft Display</h2>
<p>Hier hat das Listenelement seinen Anfangswert:</p>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
<p>Hier wird das Listenelement mit der Eigenschaft `display` verwendet. Der Wert `"inline"` wird verwendet:</p>
<ul class="display">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft display mit den Werten "inline" und "block":
Beispiel der CSS-Eigenschaft display mit den Werten inline und block
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inline {
border: 1px solid #1c87c9;
display: inline;
}
.block {
border: 1px solid #1c87c9;
display: block;
height: 30px;
width: 300px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft Display</h2>
<p>Hier hat das Listenelement den Wert `"initial"`. Wir sehen, dass der Wert `"inline"` height und width nicht akzeptiert:</p>
<span>This is some text.</span>
<span class="inline">This is another text.</span>
<hr />
<p>Hier wird das Listenelement mit dem Wert `"block"` der Eigenschaft `display` verwendet:</p>
<span class="block">This is some text.</span>
<span class="block">This is another text.</span>
</body>
</html>Beispiel für die Eigenschaft display mit dem Wert "block":
Beispiel der CSS-Eigenschaft display mit dem Wert block
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.block {
display: block;
border: 1px solid #666;
background-color: #eee;
padding: 10px;
width: 200px;
}
.hello {
border: 1px solid #1c87c9;
background-color: #8ebf42;
padding: 10px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft Display</h2>
<div class="block">
Lorem Ipsum ist Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er-Jahren der Standard-Blindtext der Branche, als ein unbekannter Drucker einen Satz von Schriften nahm und sie durcheinanderwarf, um ein Schriftmusterbuch zu erstellen.
<div class="hello">HELLO!</div>
Er hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, wobei er im Wesentlichen unverändert geblieben ist.
</div>
</body>
</html>Beispiel für die Eigenschaft display mit dem Wert "contents":
Beispiel der CSS-Eigenschaft display mit dem Wert contents
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.contents {
display: contents;
}
.hello {
border: 1px solid #1c87c9;
background-color: #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft Display</h2>
<div class="contents">
Lorem Ipsum ist Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er-Jahren der Standard-Blindtext der Branche, als ein unbekannter Drucker einen Satz von Schriften nahm und sie durcheinanderwarf, um ein Schriftmusterbuch zu erstellen.
<div class="hello">HELLO!</div>
Er hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, wobei er im Wesentlichen unverändert geblieben ist.
</div>
</body>
</html>Beispiel für die Eigenschaft display mit dem Wert "flex":
Beispiel der CSS-Eigenschaft display mit dem Wert flex
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#flex {
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: center;
}
div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft Display</h2>
<p>Hier wird `"display: flex;"` verwendet:</p>
<div id="flex">
<div style="background-color: #1c87c9;">1</div>
<div style="background-color: #666;">2</div>
<div style="background-color: #8ebf42;">3</div>
</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| inline | Stellt ein Element als Inline-Element dar. | Play it » |
| block | Stellt ein Element als Block-Element dar. | Play it » |
| contents | Das Element selbst erzeugt keinen Kasten, und seine Kinder werden so angeordnet, als wären sie direkte Kinder des Elternteils des Elements. | Play it » |
| flex | Stellt ein Element als Block-Level-Flex-Container dar. | Play it » |
| grid | Stellt ein Element als Block-Level-Grid-Container dar. | Play it » |
| inline-block | Stellt ein Element als Inline-Block-Container dar. | Play it » |
| inline-flex | Stellt ein Element als Inline-Level-Flex-Container dar. | Play it » |
| inline-grid | Stellt ein Element als Inline-Level-Grid-Container dar. | Play it » |
| inline-table | Stellt ein Element als Inline-Level-Tabelle dar. Es verhält sich wie ein HTML-Element <table>, jedoch als Inline-Box und nicht als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Kontext auf Blockebene. | Play it » |
| list-item | Das Element verhält sich wie ein HTML-Element <li>. | Play it » |
| run-in | Stellt ein Element je nach Kontext als Block oder Inline dar. | Play it » |
| table | Das Element verhält sich wie ein HTML-Element <table>. | Play it » |
| table-caption | Das Element verhält sich wie ein HTML-Element <caption>. | Play it » |
| table-column-group | Das Element verhält sich wie ein HTML-Element <colgroup>. | Play it » |
| table-header-group | Das Element verhält sich wie ein HTML-Element <thead>. | Play it » |
| table-footer-group | Das Element verhält sich wie ein HTML-Element <tfoot>. | Play it » |
| table-row-group | Das Element verhält sich wie ein HTML-Element <tbody>. | Play it » |
| table-cell | Das Element verhält sich wie ein HTML-Element <td>. | Play it » |
| table-column | Das Element verhält sich wie ein HTML-Element <col>. | Play it » |
| table-row | Das Element verhält sich wie ein HTML-Element <tr>. | Play it » |
| none | Bedeutet, dass das Element überhaupt nicht angezeigt wird. | Play it » |
| initial | Lässt die Eigenschaft ihren Standardwert verwenden. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What are the different values for the display CSS property as mentioned in the provided URL?