English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die Visibility-Eigenschaft legt fest, ob ein Element sichtbar oder versteckt ist.
Sie können die Sichtbarkeitseigenschaft verwenden, um anzugeben, ob ein Element sichtbar ist. Dieses Attribut kann einen der folgenden Werte aus der folgenden Tabelle verwenden:
| Wert | Beschreibung |
|---|---|
| visible | Standardwert. Dieser Rahmen und sein Inhalt sind sichtbar. |
| hidden | Dieser Rahmen und sein Inhalt sind unsichtbar, beeinflussen jedoch das Layout der Seite. |
| collapse | Dieser Wert führt dazu, dass die gesamte Zeile oder Spalte aus der Anzeige gelöscht wird. Dieser Wert wird für Zeilen, Zeilengruppen, Spalten und Spaltengruppen verwendet. |
| inherit | Die Werte der Sichtbarkeitseigenschaft sollten von dem übergeordneten Element geerbt werden, d.h. sie sollten denselben Sichtbarkeitswert wie das übergeordnete Element haben. |
visibility: collapse; Die Styleregeln löschen jedoch die internen Tabellenelemente, ohne die Layout des Tabellenrahmens auf andere Weise zu beeinflussen. Der von Tabellenelementen in der Regel belegte Raum wird durch den folgenden Gleichwertigen ausgefüllt.
Hinweis:Wenn für andere Elemente (nicht für Tabellenlemente) die Styleregeln visibility: collapse; angegeben sind, verhält sich ihr Verhalten wie hidden.
CSS display und die Visibility-Eigenschaft scheinen auf den ersten Blick dasselbe zu sein, sind aber tatsächlich komplett unterschiedlich und führen oft zu Verwirrung bei neuen Web-Entwicklern.
visibility: hidden; verbergt das Element, aber es belegt immer noch den Raum im Layout. Wenn die Sichtbarkeit der Unterlemente des versteckten Rahmens auf "sichtbar" gesetzt ist, sind sie sichtbar.
display: none; schaltet die Anzeige aus und löscht das Element vollständig aus dem Dokument. Selbst wenn sein HTML im Quellcode steht, nimmt es keinen Raum ein. Selbst wenn die Anzeigeeigenschaft aller Unterelemente auf none gesetzt ist, wird die Anzeige geschlossen.
Die Visibility-Eigenschaft hat vier verfügbare Werte (visible, hidden, collapse und inherit), aber die häufig verwendeten Werte sind visible und hidden.
visibility: visible /* Das Element ist sichtbar, Standardwert */ visibility: hidden /* Der Element ist nicht sichtbar, aber der entsprechende Raum wird für ihn beibehalten */ visibility: collapse /* Wirkung nur auf table-Objekte, kann Zeilen oder Spalten entfernen, beeinflusst aber nicht die Layout des Tables. Wenn dieser Wert auf Objekte außerhalb von table verwendet wird, wird er als hidden dargestellt. */ visibility: inherit /* Vererbt den Wert von visibility des übergeordneten Elements. */
Es gibt viele mögliche Werte für das Display-Attribut, aber hier konzentrieren wir uns nur auf einige davon: block, none und inline
display: none /* Element ist unsichtbar und es wird kein entsprechender Raum für es auf der Seite beibehalten */ display: block /* Darstellt sich als Blockebenelement (normalerweise eine Zeile alleine beanspruchen) */ display: inline /* Darstellt sich als Zeilebenelement (normalerweise nicht eine Zeile alleine beanspruchen) */
Wie man sieht, können sowohl die Visibility- als auch die Display-Attribute ein Element verbergen, aber ihr Unterschied liegt darin, dass visibility: hidden ein Element verbergt und gleichzeitig den所需的空间在页面上保留， während display: none so scheint, als ob das Element aus der Seite gelöscht würde und auf der Seite nicht mehr erkennbar ist.
Außerdem liegt der Unterschied zwischen display: block und display: inline darin, dass block-Elemente im Dokument eine Zeile alleine beanspruchen, während inline-Elemente dies nicht tun. Einige Objekte sind standardmäßig block-Elemente, während andere standardmäßig inline-Elemente sind. Beachte bitte bei der Verwendung, dass sichere Wiederverwendung desselben Attributes vermieden werden sollte.
Die Visibility- und Display-Attribute können beide das Verbergen von Seitenelementen erreichen, aber ihr Unterschied liegt darin, wie sie auf den normalen Dokumentfluss reagieren.
Wenn du ein Element verbergen möchtest, aber den Raum auf der Seite für dieses Element beibehalten möchtest, solltest du visibility: hidden verwenden. Wenn du gleichzeitig ein Element verbergen und anderen Inhalten den Raum füllen möchtest, solltest du display: none verwenden.