CSS-Layout - display-Eigenschaft

Display ist eines der wichtigsten CSS-Attribute zur Steuerung des Layouts.

display-Attribut

Display bestimmt, ob und wie ein Element angezeigt wird.

Jedes HTML-Element hat einen Standardwert für display, der von seinem Elementtyp abhängt. Der Standardwert für die meisten Elemente ist block oder inline.

Klicken Sie, um die Oberfläche anzuzeigen

Diese Oberfläche enthält ein <div>-Element, das standardmäßig versteckt ist. (display: none)

Es wird durch CSS gestylt, und wir verwenden JavaScript, um es anzuzeigen. (Ändern Sie display: block)

Blockelemente (block element)

Blockelemente beginnen immer in einer neuen Zeile und beanspruchen den gesamten verfügbaren Raum (so weit links und rechts wie möglich).

Dieser <div>-Element gehört zu den Blockelementen.

Einige Beispiele für Blockelemente:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline-Elemente (inline element)

Inline-Elemente beginnen nicht in einer neuen Zeile und beanspruchen nur den erforderlichen Breite.

Dies ist der AbsatzInline <span>-Element.

Einige Beispiele für Inline-Elemente:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; wird oft mit JavaScript verwendet, um Elemente auszublenden und anzuzeigen, ohne sie löschen und neu erstellen zu müssen. Wenn Sie wissen möchten, wie Sie dieses Ziel erreichen können, lesen Sie den letzten Beispiel auf dieser Seite.

Standardmäßig<script> Elemente verwenden display: none;.

Überschreiben Sie den Standardwert von Display

Wie bereits erwähnt, hat jeder Element eine Standard- display-Wert. Aber Sie können ihn überschreiben.

Die Änderung von Inline-Elementen in Blockelemente und umgekehrt ist sehr nützlich, um die Seite auf eine bestimmte Weise anzuzeigen, während gleichzeitig die Web- Standards befolgt werden.

Ein häufiges Beispiel ist die Erstellung von inline <li> Element:

Beispiel

li {
  display: inline;
}

Selbst ausprobieren

Hinweis:Die Einstellung der display-Eigenschaft des Elements wird nur ändernArt der Anzeige des Elementsohne die Art des Elements zu ändern. Daher wird die Art der Anzeige des display: block; Inline-Elemente erlauben es nicht, andere Blockelemente zu enthalten.

Das folgende Beispiel zeigt das <span>-Element als Blockelement an:

Beispiel

span {
  display: block;
}

Selbst ausprobieren

Das folgende Beispiel zeigt das <a>-Element als Blockelement an:

Beispiel

a {
  display: block;
}

Selbst ausprobieren

Verbergen Sie das Element - display: none oder visibility: hidden?

display: none

visibility: hidden

Reset

Durch das Setzen von Display Eigenschaft aufgesetzt none Elemente können ausgeblendet werden. Das Element wird ausgeblendet, und die Seite wird so dargestellt, als ob das Element nicht darin enthalten ist:

Beispiel

h1.hidden {
  display: none;
}

Selbst ausprobieren

visibility: hidden; Elemente können auch ausgeblendet werden.

Der Element wird jedoch immer noch den gleichen Raum einnehmen wie zuvor. Das Element wird ausgeblendet, beeinflusst jedoch immer noch das Layout:

Beispiel

h1.hidden {
  visibility: hidden;
}

Selbst ausprobieren

Mehr Beispiele

Unterschiede zwischen display: none; und visibility: hidden;
Dieses Beispiel zeigt display: none; VS visibility: hidden;
Kombination von CSS und JavaScript zur Anzeige von Inhalten
Dieses Beispiel zeigt, wie man mit CSS und JavaScript Elemente beim Klicken anzeigen kann.

CSS Display/Visibility Eigenschaften

Eigenschaft Beschreibung
Display Bestimmt, wie ein Element angezeigt werden soll.
Visibility Bestimmt, ob ein Element sichtbar sein sollte.