CSS -Layout - Die Anzeigeeigenschaft
Die displayEigenschaft ist die wichtigste CSS-Eigenschaft zur Steuerung des Layouts.
Die Anzeigeeigenschaft
Die displayEigenschaft gibt an, ob/wie ein Element angezeigt wird.
Jedes HTML-Element hat einen Standardanzeigewert, je nachdem, um welchen Elementtyp es sich handelt. Der Standardanzeigewert für die meisten Elemente ist blockoder
inline.
Klicken Sie hier, um das Bedienfeld anzuzeigen
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Elemente auf Blockebene
Ein Element auf Blockebene beginnt immer auf einer neuen Zeile und nimmt die gesamte verfügbare Breite ein (dehnt sich so weit wie möglich nach links und rechts aus).
Beispiele für Elemente auf Blockebene:
- <div>
- <h1> - <h6>
- <p>
- <Formular>
- <Kopfzeile>
- <Fußzeile>
- <Abschnitt>
Inline-Elemente
Ein Inline-Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite wie nötig ein.
Dies ist ein Inline-<span>-Element innerhalb eines Absatzes.
Beispiele für Inline-Elemente:
- <span>
- <a>
- <Bild>
Anzeige: keine;
display: none;wird häufig mit JavaScript verwendet, um Elemente auszublenden und anzuzeigen, ohne sie zu löschen und neu zu erstellen. Werfen Sie einen Blick auf unser letztes Beispiel auf dieser Seite, wenn Sie wissen möchten, wie dies erreicht werden kann.
Das <script>Element wird display: none;
standardmäßig verwendet.
Überschreiben Sie den Standardanzeigewert
Wie bereits erwähnt, hat jedes Element einen Standardanzeigewert. Sie können dies jedoch überschreiben.
Das Ändern eines Inline-Elements in ein Blockelement oder umgekehrt kann nützlich sein, um der Seite ein bestimmtes Aussehen zu verleihen und dennoch den Webstandards zu folgen.
Ein gängiges Beispiel ist das Erstellen von Inline- <li>Elementen für horizontale Menüs:
Beispiel
li {
display: inline;
}
Hinweis: Das Festlegen der Anzeigeeigenschaft eines Elements ändert nur, wie das Element angezeigt wird , NICHT, um welche Art von Element es sich handelt. Ein Inline-Element mit display: block;darf also keine anderen Blockelemente enthalten.
Das folgende Beispiel zeigt <span>-Elemente als Blockelemente an:
Beispiel
span {
display: block;
}
Das folgende Beispiel zeigt <a>-Elemente als Blockelemente an:
Beispiel
a {
display: block;
}
Ein Element ausblenden - display:none oder visible:hidden?
display:none
visibility:hidden
Zurücksetzen
Ein Element kann ausgeblendet werden, indem die displayEigenschaft auf
gesetzt wird none. Das Element wird ausgeblendet und die Seite wird so angezeigt, als wäre das Element nicht vorhanden:
Beispiel
h1.hidden {
display: none;
}
visibility:hidden; verbirgt auch ein Element.
Das Element nimmt jedoch immer noch den gleichen Platz wie zuvor ein. Das Element wird ausgeblendet, wirkt sich aber immer noch auf das Layout aus:
Beispiel
h1.hidden {
visibility: hidden;
}
Mehr Beispiele
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |