Jedes Element auf einer Webseite ist ein rechteckiges Feld. Die Anzeigeeigenschaft in CSS bestimmt, wie sich dieses rechteckige Feld verhält. Es gibt nur eine Handvoll häufig verwendeter Werte:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Der Standardwert für alle Elemente ist Inline. Die meisten "User Agent Stylesheets" (die Standardstile, die der Browser auf alle Websites anwendet) setzen viele Elemente auf "Block" zurück. Lassen Sie uns jeden dieser Werte durchgehen und dann einige der anderen weniger gebräuchlichen Werte behandeln.
Im Einklang
Der Standardwert für Elemente. Denken Sie an Elemente wie , oder und wie das Umschließen von Text in diese Elemente innerhalb einer Textzeichenfolge den Textfluss nicht unterbricht.
Das Element hat einen roten Rand von 1 Pixel. Beachten Sie, dass es genau mit dem Rest des Textes übereinstimmt.
Ein Inline-Element akzeptiert Rand und Abstand, aber das Element befindet sich wie erwartet inline. Rand und Polsterung schieben andere Elemente nur horizontal weg, nicht vertikal.
Ein Inline-Element akzeptiert heightund nicht width. Es wird es einfach ignorieren.
Inline-Block
Ein Element, auf das gesetzt ist, inline-blockist inline sehr ähnlich, da es inline mit dem natürlichen Textfluss (auf der „Grundlinie“) gesetzt wird. Der Unterschied besteht darin, dass Sie ein widthund ein setzen können, heightdas respektiert wird.
Block
Eine Reihe von Elementen wird blockvom UA-Stylesheet des Browsers festgelegt. Sie sind in der Regel Container - Elemente, wie , und
. Auch Text "Blöcke" wie
und
. Elemente auf Blockebene sitzen nicht inline, sondern brechen an ihnen vorbei. Standardmäßig (ohne eine Breite festzulegen) nehmen sie so viel horizontalen Raum wie möglich ein.
Die beiden Elemente mit den roten Rändern sind
s, die Elemente auf Blockebene sind. Das Element dazwischen sitzt nicht inline, da die Blöcke unter den Inline-Elementen zusammenbrechen.
Einlaufen
Erstens funktioniert diese Eigenschaft in Firefox nicht. Es heißt, dass die Spezifikation dafür nicht gut genug definiert ist. Um es zu verstehen, ist es so, als ob Sie möchten, dass ein Header-Element mit dem Text darunter in Einklang steht. Das Floating funktioniert nicht und nichts anderes, da Sie nicht möchten, dass der Header ein untergeordnetes Element des darunter liegenden Textelements ist, sondern ein eigenständiges Element. In "unterstützenden" Browsern ist es so:
Verlassen Sie sich jedoch nicht darauf.
Flexbox
Die displayEigenschaft wird auch für neue Fanglayout-Methoden wie Flexbox verwendet.
.header ( display: flex; )
Es gibt einige ältere Versionen der Flexbox-Syntax. Informationen zur Syntax bei der Verwendung von Flexbox mit der besten Browserunterstützung finden Sie in diesem Artikel. Lesen Sie unbedingt diese vollständige Anleitung zu Flexbox.
Flow-Root
Der flow-rootAnzeigewert erstellt einen neuen „Blockformatierungskontext“, ist aber ansonsten ähnlich block. Ein neuer BFC hilft beim Löschen von Floats und macht Hacks überflüssig.
.group ( display: flow-root; )
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
Chrom
Feuerfuchs
IE
Kante
Safari
58
53
Nein
79
13
Handy / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13.0-13.1
Gitter
Das Rasterlayout wird zunächst auch über die Anzeigeeigenschaft festgelegt.
body ( display: grid; )
Hier ist unser Leitfaden zum Rasterlayout, der eine Browser-Support-Tabelle enthält.
Keiner
Entfernt das Element vollständig von der Seite. Beachten Sie, dass das Element, solange es sich noch im DOM befindet, visuell und auf jede andere denkbare Weise entfernt wird (Sie können nicht auf es oder seine untergeordneten Elemente zugreifen, es wird von Bildschirmleseprogrammen usw. ignoriert).
Tabellenwerte
Es gibt eine ganze Reihe von Anzeigewerten, die dazu führen, dass sich Nicht-Tabellenelemente wie Tabellenelemente verhalten, wenn dies erforderlich ist. Es ist selten, aber manchmal können Sie mit Ihrem Code „semantischer“ umgehen, während Sie die einzigartigen Positionierungsfähigkeiten von Tabellen nutzen.
