CSS Anzeige (Anzeige)

Das Display-Attribut bestimmt den Typ des durch ein Element generierten Rahmens, die häufig verwendeten Werte sind block, none und inline.

CSS Display-Eigenschaft

Die CSS-Spezifikation definiert den Standardwert der Display-Eigenschaft aller Elemente, z.B. wird das <div>-Element als Block dargestellt, während das <span>-Element als eingebettet angezeigt wird.

Ändern des Standardwertes der Display-Eigenschaft

Der Standardwert der Display-Eigenschaft eines Elements ist eine wichtige Bedeutung des Display-Attributs. Zum Beispiel, ändern Sie einen Inline-Element in ein Block-Element oder umgekehrt.

Dieser Abschnitt beschreibt die häufigsten CSS-Display-Werte.

Block anzeigen (Block)

Der block-Wert der display-Eigenschaft zwingt das Verhalten des Elements, so zu sein, als obblockElemente, z.B.<div>oder<p>Elemente. Die folgenden Stilregeln in diesem Beispiel werden<span>und <a>Elemente werden als block-elemente angezeigt:

span {
　　　　display: block;
}
a {
　　　　display: block;
}

Inline anzeigen (inline)

Der inline-Wert der display-Eigenschaft verhält sich wieinline-levelElemente, z.B.<span>oder<a>Elemente. Die folgenden Stilregeln in diesem Beispiel werden<p>und <li>Elemente werden als inline-Stufe-Elemente angezeigt:

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

Inline-Block anzeigen (inline-block)

inline-Wert der display-Eigenschaft-Der Wert block erzeugt für das Element einen Rechteckrahmen, der mit dem umgebenden Inhalt fließen wird, d.h. auf der gleichen Zeile wie das benachbarte Inhalt. Die folgenden Stilregeln werden<div>und <span>Elemente werden als inline-Block angezeigt:

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

Nicht anzeigen (none)

Wenn der Wert der display-Eigenschaft none ist, wird das Element keinen Rahmen erzeugen und nicht auf der Seite angezeigt. Die Unterelemente erzeugen auch keinen Rahmen, selbst wenn ihre Display-Eigenschaft nicht gesetzt ist. Der angezeigte Dokument scheint, als ob das Element im Dokumentbaum nicht existiert.

h1　{
　　　　display: none;
}
p {
　　　　display: none;
}