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 Was ist Golang -Testpaket? Das Golang -Testpaket enthält mehrere Tools und Funktionen, die das Testen, Debuggen und Benchmark -... Mohamed Flore C -Programmierung Was bedeutet '/=' in der C -Programmierung? Der „/=“ -Preiber ist ein nützlicher Operator in der C -Programmierung, der Teilung und Zuordnung in... Gian Eisenlauer Java Java Servlet Beispiele Tutorial über die Verwendung des Java -Servlets zur Entwicklung des Webanwendungsservers und der ver... Ansgar Radtke Python Python findet den Index aller Vorkommen in einer Liste Frederik Rodehau Ubuntu So installieren Sie CUDA auf Ubuntu Top 10.Top 10 Lts Stephan Harms AWS Was ist der Unterschied zwischen AWS -Batch und Lambda? Lars Daub Docker Wie kann ich Docker über Ubuntu Terminal installieren?? Stephan Harms Power Shell Was ist umbenannte Befehl in PowerShell umbenannt? Stephan Harms Oracle -Datenbank Wie man Oracle -Sequenz zwischendurchschnittlich ist, um die Ressourcen des Datenwörterbuchs zu verbessern? Christopher Lammert c scharf Brechen und Aussagen in C# fortsetzen Ahmed Stöckert Php So überprüfen Sie, ob ein Array in PHP leer ist? Fr. Chris Frisch C ++ Verständnis während der Schleife in C ++ Ahmed Stöckert Php Was ist oop abstrakte Klasse in PHP? Ansgar Radtke