CSS - Display-Eigenschaft: Dein Tor zur visuellen Magie!

Hallo da drüben, zukünftige CSS-Zauberer! ? Ich freue mich sehr, diese Reise mit euch anzutreten, während wir die faszinierende Welt der CSS display-Eigenschaft erkunden. Als jemand, der seit über einem Jahrzehnt CSS unterrichtet, kann ich euch versichern, dass das Beherrschen dieser Eigenschaft wie das Öffnen eines Schatzkästens voller Webdesign-Möglichkeiten ist. Also, tauchen wir ein!

Was ist die Display-Eigenschaft?

Bevor wir uns den Details zuwenden, lassen Sie uns verstehen, was die display-Eigenschaft eigentlich macht. In einfachen Worten kontrolliert sie, wie ein Element auf einer Webseite dargestellt wird. Stellt euch vor, es ist der Regisseur eines Spiels, der jedem Schauspieler (Element) mitteilt, wie er sich auf der Bühne (eurer Webseite) verhalten soll.

Mögliche Werte

Die display-Eigenschaft ist wie ein Schweizer Army Knife - sie hat viele Werkzeuge (Werte) für verschiedene Situationen. Hier ist eine Tabelle der häufigsten Werte, die wir besprechen werden:

Wert	Beschreibung
inline	Stellt ein Element als inline-Element dar (wie <span>)
block	Stellt ein Element als Block-Element dar (wie <div>)
inline-block	Stellt ein Element als inline-Level-Block-Container dar
none	Das Element wird完全 vom Dokument entfernt
flex	Stellt ein Element als Block-Level-Flex-Container dar
inline-flex	Stellt ein Element als inline-Level-Flex-Container dar
grid	Stellt ein Element als Block-Level-Raster-Container dar
inline-grid	Stellt ein Element als inline-Level-Raster-Container dar
table	Lässt das Element sich wie ein <table>-Element verhalten
list-item	Lässt das Element sich wie ein <li>-Element verhalten

Gültig für

Die display-Eigenschaft gilt für alle HTML-Elemente. Ja, ihr habt richtig gehört - alle! Vom bescheidenen <span> bis zum mächtigen <div>, jedes Element kann von dieser kraftvollen Eigenschaft beeinflusst werden.

DOM-Syntax

Wenn ihr mit JavaScript und dem Document Object Model (DOM) arbeitet, könnt ihr die display-Eigenschaft wie folgt manipulieren:

element.style.display = "value";

Zum Beispiel:

document.getElementById("myElement").style.display = "none";

Dies würde das Element mit der ID "myElement" verstecken. Magie, oder?

CSS display - inline Wert

Lassen wir mit dem inline-Wert beginnen. Dies ist der Standardwert für Elemente wie <span>, <a> und <img>.

<style>
.inline-element {
display: inline;
background-color: gelb;
padding: 5px;
}
</style>

<p>Dies ist ein Absatz mit <span class="inline-element">einem inline-Element</span> darin.</p>

In diesem Beispiel wird das <span>-Element mit dem Text fließen, ohne auf einer neuen Zeile zu beginnen. Es ist wie ein Wort in einem Satz - es unterbricht nicht den Fluss.

CSS display - block Wert

Als Nächstes ist der block-Wert an der Reihe. Dies ist der Standard für Elemente wie <div>, <p> und <h1> bis <h6>.

<style>
.block-element {
display: block;
background-color: hellblau;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">Dies ist ein Block-Element.</div>
<div class="block-element">Dies ist ein weiteres Block-Element.</div>

Block-Elemente beginnen auf einer neuen Zeile und dehnen sich auf die volle Breite aus, die verfügbar ist. Sie sind wie Absätze in einem Buch - jeder beginnt auf einer neuen Zeile.

CSS display - inline-block Wert

Der inline-block-Wert ist wie ein Hybrid - er kombiniert Eigenschaften von inline und block.

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: hellgrün;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Diese Elemente werden nebeneinander sitzen (wie inline), aber ihr könnt Breite und Höhe darauf setzen (wie block). Es ist perfekt für das Erstellen von rasterartigen Layouts ohne Verwendung eines tatsächlichen Rasters oder Flexbox.

CSS display - none Wert

Der none-Wert ist wie ein Unsichtbarkeitsmantel für eure Elemente.

<style>
.hidden {
display: none;
}
</style>

<p>Du kannst diesen Absatz sehen.</p>
<p class="hidden">Aber diesen nicht!</p>

Elemente mit display: none werden vollständig aus dem Layout entfernt. Es ist, als ob sie gar nicht auf der Seite existieren.

CSS display - table Werte

CSS kann Elemente so verhalten lassen, als wären sie Tabellen-Elemente, auch wenn sie keine tatsächlichen <table>-Tags sind.

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid schwarz;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">Zelle 1</div>
<div class="table-cell">Zelle 2</div>
</div>
<div class="table-row">
<div class="table-cell">Zelle 3</div>
<div class="table-cell">Zelle 4</div>
</div>
</div>

Dies erstellt eine tabelenartige Struktur ohne Verwendung tatsächlicher Tabellen-Elemente. Es ist großartig für das Erstellen von Layouts, die sich wie Tabellen verhalten, aber mit mehr Flexibilität.

CSS display - flex Wert

Flexbox ist ein leistungsstarkes Layout-Werkzeug, und es beginnt mit display: flex.

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: hellgrau;
}
.flex-item {
background-color: weiß;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Flex-Element 1</div>
<div class="flex-item">Flex-Element 2</div>
<div class="flex-item">Flex-Element 3</div>
</div>

Dies erstellt einen flexiblen Container mit Elementen, die leicht ausgerichtet und verteilt werden können. Es ist wie eine Gruppe von Turnerinnen, die sich perfekt an ihren Raum anpassen können.

CSS display - inline-flex Wert

inline-flex ist ähnlich wie flex, aber der Container selbst verhält sich wie ein inline-Element.

<style>
.inline-flex-container {
display: inline-flex;
background-color: hellrosa;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: weiß;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">Element 1</div>
<div class="flex-item">Element 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Element 3</div>
<div class="flex-item">Element 4</div>
</div>

Dies ermöglicht es euch, mehrere Flex-Container auf einer gleichen Zeile zu haben, was für das Erstellen komplexer Layouts nützlich sein kann.

CSS display - grid Wert

Grid ist ein weiteres leistungsstarkes Layout-Werkzeug, das mit display: grid initiiert wird.

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: hellblau;
padding: 10px;
}
.grid-item {
background-color: weiß;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

Grid ermöglicht es euch, komplexe Layouts mit Zeilen und Spalten zu erstellen. Es ist wie ein perfektes Spreadsheet für eure Elemente!

CSS display - inline-grid Wert

Ähnlich wie inline-flex erstellt inline-grid einen Raster-Container, der sich wie ein inline-Element verhält.

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: hellgelb;
padding: 10px;
}
.grid-item {
background-color: weiß;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

Dies ermöglicht es euch, mehrere Raster-Container auf einer gleichen Zeile zu haben, was weitere Layout-Möglichkeiten eröffnet.

CSS display - list-item Wert

Schließlich haben wir list-item, das ein Element so verhalten lässt, als wäre es ein Listen-Element.

<style>
.custom-list {
display: list-item;
list-style-type: quadrat;
margin-left: 20px;
}
</style>

<div class="custom-list">Dies ist ein benutzerdefiniertes Listen-Element</div>
<div class="custom-list">Dies ist ein weiteres benutzerdefiniertes Listen-Element</div>

Dies ist nützlich, wenn ihr Listenstrukturen erstellen wollt, ohne tatsächliche <ul> oder <ol>-Elemente zu verwenden.

Und das war's, Leute! Wir haben die Welt der display-Eigenschaften bereist, von der bescheidenen inline bis zur mächtigen grid. Denkt daran, der Schlüssel zum Beherrschen von CSS ist die Übung. Also geht raus und experimentiert mit diesen Eigenschaften. Wer weiß? Vielleicht kreiert ihr das nächste große Ding im Webdesign!

Frohes Coden und möge eure Layouts immer pixelgenau sein! ??

Credits: Image by storyset