English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die CSS-Eigenschaft display legt die vom Element erzeugte Boxart fest.
Die nachstehende Tabelle enthält die Anwendungsanweisungen und Versionshistorie dieser Eigenschaft sowie die Verwendungssyntax in JavaScript-Skripten.
| Standardwert: | inline |
|---|---|
| Geeignet für: | Alle Elemente |
| Vererbung: | Keine |
| Animierbar: | Nein.Siehe auch Animationseigenschaft。 |
| Version: | CSS 1，2，3 |
| JavaScript-Syntax: | object.style.display="block" |
Der berechnete Wert der Eigenschaft display kann vom Wurzelelement sowieSchwebenoderElemente mit absoluter Positionunterschiedliche Werte.
Wenn der Wert der Eigenschaft display auf none gesetzt ist, wird dieses Element überhaupt keine Box erzeugen und hat keinen Einfluss auf die Layout; das Element und sein Inhalt werden vollständig aus der Formatstruktur entfernt und der Dokument wird so dargestellt, als ob das Element im Dokumentbaum nicht existiert.
Die Syntax dieser Eigenschaft ist wie folgt:
display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit
Der folgende Beispiel zeigt, wie die Eigenschaft display verwendet wird.
div {
display: inline;
}
span {
display: block;
}Testen wir einmal‹/›Die nachstehende Tabelle beschreibt den Wert dieser Eigenschaft.
| Wert | Beschreibung |
|---|---|
| inline | Das Element erzeugt einenInline-EbeneRahmen. |
| block | Das Element erzeugt einenBlockRahmen. |
| contents | Das Element erzeugt selbst keinen Rahmen, aber seine KinderElementundPseudo-ElementErzeugten Rahmen, und der Text läuft normal. |
| flex | Das Element erzeugt einen blockigenDehnungscontainerbox。 |
| flow | Das Element layoutt seinen Inhalt mit dem Flusslayout (Block- und Inline-Layout). |
| flow-root | Das Element erzeugt einen Block-Container und layoutt den Inhalt mit dem Flusslayout. |
| grid | Das Element erzeugt einen Block-Container für das Gittercontainer. |
| inline-block | Das Element erzeugt einen Block-Container, der so gestaltet ist, als wäre es ein eingebetteter Container. |
| inline-flex | Das Element erzeugt einen Inline-Container für das Dehnungscontainer. |
| inline-grid | Das Element erzeugt einen Inline-Container für das Gitter. |
| inline-table | Das Verhalten dieses Elements ähnelt einem Table, ähnlich einer Inline-Box. |
| list-item | Das Element erzeugt einen Block-Container für den Inhalt und eine separate Inline-Box für die Liste der Markierungen. |
| run-in | Dieser Element erzeugt basierend auf dem Kontext einen Block oder eine Inline-Box. |
| table | Das Verhalten dieses Elements ähnelt<table>HTML-Elemente. |
| table-caption | Das Verhalten dieses Elements ähnelt<caption>HTML-Elemente. |
| table-column-group | Das Verhalten dieses Elements ähnelt<colgroup>HTML-Elemente. |
| table-header-group | Das Verhalten dieses Elements ähnelt<thead>HTML-Elemente. |
| table-footer-group | Das Verhalten dieses Elements ähnelt<tfoot>HTML-Elemente. |
| table-row-group | Das Verhalten dieses Elements ähnelt<tbody>HTML-Elemente. |
| table-cell | Das Verhalten dieses Elements ähnelt<td>HTML-Elemente. |
| table-column | Das Verhalten dieses Elements ähnelt<col>HTML-Elemente. |
| table-row | Das Verhalten dieses Elements ähnelt<tr>HTML-Elemente. |
| none | Schließen Sie das Element nicht an. Selbst wenn alle Display-Eigenschaften der Kindelemente auf none gesetzt sind, wird es nicht geschlossen. |
| initial | Setzen Sie diesen Wert auf seinen Standardwert. |
| inherit | Wenn angegeben, wird der display-Wert des übergeordneten Elements verwendet. |
Kompatibilität der Browser mit der display-Eigenschaft; die Zahlen in der folgenden Tabelle geben die niedrigste Versionsnummer der Browser an, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.
|
Warnung:Werte, z.B. contents, flow-root, run-in und andere werden in den meisten Browsern schlecht unterstützt. Sie sollten sie besser vorübergehend vermeiden.
Bitte beziehen Sie sich auf die folgenden Tutorials:CSS Display。
Verwandte Eigenschaften:visibility，float，position。