Die display Eigenschaft ist die wichtigste CSS-Eigenschaft zur Steuerung des Layouts.
Die display Eigenschaft
Die display Eigenschaft spezifiziert wann/wie ein Element angezeigt wird.
Jedes HTML-Element hat bei Vorlage einen Anzeige-Wert, je nach dem, um welchen Element-Typ es sich handelt.
Der Vorlage display Wert für die meisten Elemente ist block oder inline.
Block-Element
Ein block-Element immer startet ein neue Zeile und nimmt ein die volle Breite die wählbar ist.
Dehnt sich aus nach links und rechts so weit es geht.
Beispiele von block-Elementen:
<div>
<h1>
-
<h6>
<p>
<form>
<header>
<footer>
<section>
<!DOCTYPE html>
<html>
<head>
<style>
main {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Das main Element ist ein block-Element und nimmt die ganze Breite ein.</p>
<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
</main>
</body>
</html>
Inline Elemente
Ein inline-Element startet keine neue Zeile nimmt nur so viel Platz in der Breite ein wie nötig.
Beispiele von inline-Elementen:
<span>
<a>
<img>
<!DOCTYPE html>
<html>
<head>
<style>
span {
border: 1px solid black;
background-color: grey;
}
</style>
</head>
<body>
<p>Das span Element ist ein inline-Element und nimmt nur so viel Platz ein wie nötig.</p>
<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.<span>Das ist ein span-Element</span> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
</main>
</body>
</html>
Überschreiben des Vorlage Display Wert
Wie erwähnt , jedes Element hat einen Vorlage(default)-Wert. Du kannst den Vorlage-Wert überschreiben.
Wechseln eines inline-Element zu einem Block-Element, oder umgekehrt, und du folgst immer noch dem Webstandard.
Im folgenden Beispiel machem wir inline <li> Elemente für ein horizontale Navigation:
Ein <li>-Element hat die Vorlage(default)-Wert eines block-Element.
Bemerke: Mit der display-Eigenschaft ändert sich nur die Anzeige eines Elementes,
aber nicht um welche Art von Elementen es sich handelt.
Ein inline-Element mit der display-Eigenschaft: block; ist es nicht erlaubt andere block-Elemente zu enthalten.
Das folgende Beispiel macht ein <span> Element(Vorlage inline) zu einem block-Element.
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>Mit der display-Eigenschaft die den Wert "block" hat</span><span>resultiert ein Zeilenumbruch zwischen den zwei Elementen.</span>
</body>
</html>
Verstecken eines Elementes kann realisiert werden wenn man den Wert der display-Eigenschaft auf none setzt.
Das Element wird versteckt und die Seite wird angezeigt als wäre das Element nicht da:
<p>Bemerke dass das Element mit display: none; keinen Platz einnimmt auf der Seite.</p>
</body>
</html>
Verstecken eines Elementes kann realisiert werden wenn man den Wert der visibility-Eigenschaft auf hidden setzt.
Bemerke dass das Element mit visibility: hidden; jenen Platz einnimmt auf der Seite wie wenn es sichtbar wäre.
