Sichtbarkeit & Display

Bisher waren alle Elemente sichtbar, mit denen wir gearbeitet haben, was Sie wahrscheinlich die meiste Zeit wollen. CSS enthält jedoch einige sichtbarkeitsbezogene Eigenschaften, die in vielen Situationen nützlich sein können. Sie möchten beispielsweise einen Teil des Texts ausblenden, bis ein Benutzer auf die Schaltfläche "Mehr anzeigen" oder auf ähnliche Anwendungsfälle klickt.

Sichtbarkeit vs. Display

CSS verfügt über zwei Eigenschaften, mit denen die Sichtbarkeit gesteuert wird: Die Eigenschaft visibility und die Eigenschaft display. Sie werden in unterschiedlichen Situationen eingesetzt und verhalten sich auf verschiedene Weise unterschiedlich. In diesem Kapitel werden wir beide untersuchen und sehen, wie sie sich unterscheiden.

Die sichtbarkeits-Eigenschaft

Der Anfangswert der Visibility-Eigenschaft ist sichtbar. Dies bedeutet lediglich, dass das Element sichtbar ist, sofern Sie es nicht ändern. Dies ist sinnvoll. Probieren Sie nun dieses Beispiel aus:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
}
</style>

<div class="box">Box 1</div>
<div class="box" style="visibility: hidden;">Box 2</div>
<div class="box">Box 3</div>

Drei Kästchen, aber das mittlere wurde unsichtbar gemacht, indem die Sichtbarkeitseigenschaft auf hidden gesetzt wurde. Wenn Sie das Beispiel ausprobieren, werden Sie eine sehr wichtige Sache bemerken: Während die zweite Box nicht da ist, hinterlässt sie ein ziemlich großes Loch in der Seite. Oder anders ausgedrückt: Das Element ist nicht sichtbar, der Browser reserviert jedoch noch den Platz dafür!

Dies ist einer der wichtigsten Unterschiede zwischen der visibility -Eigenschaft und der display -Eigenschaft. Elemente, die mit der Visibility -Eigenschaft ausgeblendet werden, wirken sich immer noch auf das Layout aus, als ob es sichtbar wäre Vollständig transparentes Element, während Elemente, die von der Anzeigeeigenschaft ausgeblendet werden, dies nicht tun (der Browser behandelt es so, als wäre es nicht vorhanden)....

Die display Eigenschaft

Versuchen wir das erste Beispiel dieses Artikels, aber anstelle der visibility-Eigenschaft verwenden wir die display -Eigenschaft, damit Sie den Unterschied erkennen können:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
}
</style>

<div class="box">Box 1</div>
<div class="box" style="display: none;">Box 2</div>
<div class="box">Box 3</div>

Wenn Sie die Beispiele ausprobieren, werden Sie den Unterschied sofort bemerken: Das zweite Feld ist spurlos verschwunden, als wir den Wert none für die Eigenschaft display verwendet haben.

Am Anfang dieses Abschnitts über das CSS-Box-Modell haben wir über den Unterschied zwischen Inline- und Block-Elementen gesprochen, wie alle HTML-Elemente als eines von ihnen geboren werden und wie dies durch CSS tatsächlich geändert werden kann. Die Eigenschaft dafür ist in der Tat die Anzeigeeigenschaft. Sie wird häufig zum Ausblenden von Elementen verwendet, aber auch für eine Reihe anderer Dinge, z.B.: Zum Verschieben eines Elements zwischen dem Inline- und dem Blocktyp.

Wenn Sie ein Element ausgeblendet haben, indem Sie display auf none setzen, können Sie es häufig zurückholen, indem Sie display auf inline setzen oder block (aber es gibt noch viele andere mögliche Werte, wie Sie an dieser tollen Referenzseite für die Anzeigeeigenschaft) sehen können.

Erinnern Sie sich, wie wir darüber gesprochen haben, dass das div-Element als Element auf Blockebene und das span-Element als Inline-Element geboren werden? Sehen Sie, wie einfach dies mit der Anzeigeeigenschaft geändert werden kann:

<style type="text/css">
.with-background {
	background-color: CornflowerBlue;
}
</style>

<span style="display: block;" class="with-background">Hello, world!</span>
<div style="display: inline;" class="with-background">Hello, world!</div>

Zusammenfassung

Das Ausblenden von Elementen auf einer Webseite ist mit CSS einfach - verwenden Sie einfach die Sichtbarkeitseigenschaft, wenn Sie weiterhin den für das Element reservierten Platz behalten möchten, oder die Anzeigeeigenschaft, wenn Sie möchten, dass der Browser das Element so behandelt, als wäre es nicht Dort. In diesem Kapitel haben wir auch erfahren, dass die Anzeigeeigenschaft nicht nur zum Ausblenden von Elementen verwendet wird, sondern beispielsweise zum Verschieben eines Elements zwischen Inline- und Blockebene oder einem der anderen Typen.