CSS Display -Eigenschaft | Erklärt

HTML -Elemente sind im Allgemeinen in zwei Klassen unterteilt; Inline-Elemente und Elemente auf Blockebene. Inline-Elemente konsumieren nur den erforderlichen Speicherplatz auf einer Webseite, aber Elemente auf Blockebene verbrauchen jedoch den gesamten horizontalen Raum. Dies wird als ihr Anzeigverhalten angesehen, das mit der CSS -Anzeigeeigenschaft verändert werden kann. Diese Beschreibung soll seine Leser über die Details der Anzeigeeigenschaft aufklären.

Eigenschaft anzeigen

Wie der Name schon sagt, definiert die CSS -Anzeigeeigenschaft, wie HTML -Elemente auf einer Webseite angezeigt werden. Diese Eigenschaft kann von großem Nutzen sein, wenn Sie das übliche Verhalten eines HTML -Elements ändern möchten. Nehmen wir an, aus irgendeinem Grund möchten Sie den Zustand eines Inline-Elements gegen das eines Elements auf Blockebene austauschen, dann können Sie diese Eigenschaft verwenden, um diese Änderung zu rendern.

Syntax

Anzeige: Wert;

Hier haben wir einige Werte der Display -Eigenschaft für Ihr besseres Verständnis demonstriert.

Inline -Elemente

Elemente, die nur die erforderliche Menge an Platz verbrauchen, werden als Inline -Elemente bezeichnet. Sie können auch als Elemente bezeichnet werden, die in einer Zeile angezeigt werden.Diese Elemente beginnen nicht aus einer neuen Linie, sondern können mehrere Inline -Elemente in derselben Linie platzieren. Einige Beispiele sind,, usw.

So konvertieren Sie Elemente auf Blockebene in Inline-Elemente mithilfe der Anzeigeeigenschaft

In diesem Beispiel erstellen wir drei Elemente und setzen den Wert der Anzeigeeigenschaft als „Inline“ fest. Daher werden alle Elemente in einer einzelnen Zeile angezeigt und verbrauchen nur die Menge des erforderlichen Platzes.

Ausgang

Obwohl Element standardmäßig ein Element auf Blockebene ist, wird sich jedoch als Inline-Element als Inline-Element auf "Inline" einstellen.

Elemente auf Blockebene

Elemente, die den verfügbaren Platz verbrauchen (von links nach rechts), und in einer neuen Linie starten. Blockebene -Elemente können Inline -Elemente zusammen mit anderen Elementen auf Blockebene halten. Die Mehrheit der Elemente in HTML sind Blockebene -Elemente. Einige Beispiele sind ,

,

, usw.

So konvertieren Sie Inline-Elemente in Elemente auf Blockebene mithilfe der Anzeigeeigenschaft

Aus diesem Grund werden wir zwei Elemente betrachten und den Wert der Anzeigeeigenschaft auf "Block" festlegen, auf "Block". Infolgedessen verbrauchen beide Elemente den gesamten horizontalen Raum und wirken als Elemente auf Blockebene. Obwohl Element standardmäßig ein Inline -Element ist.

Ausgang

Flex -Anzeige

Dieser Wert passt die Elemente effizient in einem Container ein. Es verteilt den Raum gleichermaßen auf Elemente, die in einem Container vorhanden sind.

Wie funktioniert der Flexwert der Anzeigeeigenschaft?

In diesem Beispiel haben wir den Flexwert der Anzeigeeigenschaft veranschaulicht. Wir haben fünf geschaffen

Elemente innerhalb eines Elements mit Klassenflex-Container und wir haben der Anzeigeeigenschaft der "Flex" -Werchen zugewiesen

Elemente.

Ausgang

Rasteranzeige

Der Netzwert der Anzeigeeigenschaft ist nützlich, wenn Elemente in Form eines Gitters angelegt werden. Wenn Sie außerdem ein Gitter verwenden, müssen Sie Schwimmer und Positionierung nicht verwenden.

Wie funktioniert der Netzwert der Anzeigeeigenschaft?

In diesem Beispiel haben wir sechs Elemente innerhalb eines größeren Elements mit Klassengitter-Container erstellt und der Anzeigeeigenschaft der "Grid" -Werte zugewiesen

Elemente

Ausgang

Es gibt zahlreiche andere Werte, die der Anzeigeeigenschaft zugeordnet werden können, die wie folgt sind.

Wert	Beschreibung
im Einklang	Dieser Wert zeigt Elemente als Inline -Elemente an.
Block	Dieser Wert zeigt Elemente als Elemente auf Blockebene an.
Inhalt	Dieser Wert lässt einen Behälter verschwinden.
biegen	Dieser Wert zeigt Elemente als Flexbehälter auf Blockebene an.
Netz	Dieser Wert zeigt Elemente als Gitterbehälter auf Blockebene an.
Inline-Block	Dieser Wert zeigt Elemente als Blockbehälter auf Linieebene an.
Inline-Flex	Dieser Wert zeigt Elemente als Flexbehälter auf Linienebene an.
Inline-Gitter	Dieser Wert zeigt Elemente als Inline-Stufe-Gitterbehälter an.
Inline-Tabelle	Dieser Wert zeigt Tabellen auf Linienebene an.
Listenpunkt	Dieser Wert zeigt alle Elemente in einem an Element.
einlaufen	Dieser Wert auf der Grundlage des Kontexts zeigt Elemente entweder als Inline- oder Block-Level-Elemente an.
Tisch	Dieser Wert macht Elemente so, wie Elemente. Element. Tabellenüberschrift Dieser Wert macht Elemente, um sich wie Elemente zu verhalten. Tabellensäule-Gruppen Dieser Wert macht Elemente, um sich wie Element zu verhalten. Tabellenhändler-Gruppen Dieser Wert macht Elemente, um sich wie Element zu verhalten. Tischfußgruppe Dieser Wert macht Elemente, um sich wie Element zu verhalten. Tabellenreihegruppe Dieser Wert macht Elemente, um sich wie Element zu verhalten. Tischzelle Dieser Wert macht Elemente so, wie Element. Tischsäule Dieser Wert macht Elemente, um sich wie Element zu verhalten. Tischreihe Dieser Wert macht Elemente so, wie keiner Dieser Wert entfernt das gesamte Element. Initial Dieser Wert zeigt den Standardwert des Elements an. erben Mit diesem Wert ermöglicht ein Element die Eigenschaften von seinem übergeordneten Element. Für ein besseres Verständnis können Sie einige andere Werte der Anzeigeeigenschaft ausprobieren, um zu sehen, wie sie funktionieren. Abschluss Die CSS-Anzeigeeigenschaft definiert, wie HTML-Elemente auf einer Webseite angezeigt werden. Darüber hinaus können Sie das Standardverhalten eines HTML-Elements ändern. Sie können beispielsweise ein Inline-Element als Block-Level-Element verhalten und umgekehrt umgekehrt. Es gibt eine Vielzahl von Werten, die Sie auf die Anzeigeeigenschaft anwenden können, jeweils einen anderen Zweck. In dieser Beschreibung wird die Anzeigeeigenschaft zusammen mit geeigneten Beispielen ausführlich erörtert. « Zeichen in HTML festgelegt CSS -Schriftarten » Golang Wie man eine Saite in Golang schneiden String Trimming ist ein Prozess, in dem zusätzliche Räume oder Zeichen von Anfang oder Ende einer Ze... Jean Dengler Golang Was sind Konstanten in Golang? In der GO -Sprache sind Konstanten Variablen mit festen Werten, die während der Programmausführung n... Jean Dengler Php Was ist eine Schnittstelle in objektorientiertem PHP Schnittstellen definieren einen Standard -Satz von Aktionen, mit denen verschiedene Klassen Code kon... Gian Eisenlauer Python Python Stringio Jean Dengler Python So entpacken Sie Dateien in Python Gian Eisenlauer Sqlite So verwenden Sie SQLite Viewer Web App Hussein Burkhard Php So verwenden Sie PHP -Serialisierungsfunktion Prof. Dr. Julien Plank Java So verwenden Sie Byte -Schlüsselwort in Java Gian Eisenlauer Oracle Linux Was sollte minimale Systemspezifikationen für Oracle Linux sein? Mohamed Flore Java Was ist Import Java.io.*; in Java? Ansgar Radtke Power Shell Was sind die Schritte, um Windows PowerShell zu starten? Mohamed Flore Docker Wie man einen Docker -Container tötet? Stephan Harms Golang So verwenden Sie das Defer -Schlüsselwort in Golang Ansgar Radtke