Heim > Web-Frontend > CSS-Tutorial > Was sind die Attributwerte der Anzeige in CSS?

Was sind die Attributwerte der Anzeige in CSS?

百草
Freigeben: 2023-11-14 14:09:11
Original
3123 Leute haben es durchsucht

Zu den Anzeigeattributwerten in CSS gehören Inline, Block, Inline-Block, None, Flex, Grid, Table, Inline-Table, List-Item oder Inherit usw. Detaillierte Einführung: 1. Inline wird das Element als Inline-Element angezeigt und in derselben Zeile wie benachbarte Elemente angezeigt. Die Attribute width und height haben keine Auswirkung, und die Attribute margin und padding können nur die linken und rechten Werte festlegen. 2. Block, das Element ist Show usw.

Was sind die Attributwerte der Anzeige in CSS?

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Das Anzeigeattribut in CSS wird verwendet, um zu definieren, wie ein Element angezeigt wird, was bestimmt, wie das Element auf der Seite dargestellt wird. Das Anzeigeattribut hat die folgenden allgemeinen Attributwerte:

1. Inline: Das Element wird als Inline-Element angezeigt, das in derselben Zeile wie benachbarte Elemente angezeigt wird. Die Attribute width und height haben keine Auswirkung, und die Attribute margin und padding können nur linke und rechte Werte festlegen. Zu den gängigen Inline-Elementen gehören span, a, img usw.

2. Block: Das Element wird als Element auf Blockebene angezeigt und belegt eine exklusive Zeile. Die Attribute „Breite“ und „Höhe“ können festgelegt werden, und die Attribute „Rand“ und „Auffüllung“ können in vier Richtungen festgelegt werden. Zu den gängigen Elementen auf Blockebene gehören div, p, h1 usw.

3. Inline-Block: Das Element wird als Inline-Block-Level-Element angezeigt, das in derselben Zeile wie benachbarte Elemente angezeigt wird. Die Attribute „Breite“ und „Höhe“ können festgelegt werden, und die Attribute „Rand“ und „Auffüllung“ können in vier Richtungen festgelegt werden. Zu den gängigen Inline-Elementen auf Blockebene gehören Schaltflächen, Eingaben usw.

4. keine: Das Element wird nicht angezeigt, das heißt, das Element ist ausgeblendet. Elemente belegen keinen Platz auf der Seite und reagieren nicht auf Interaktionsereignisse.

5. Flex: Verwenden Sie ein flexibles Layout, um Elemente anzuzeigen, was ein flexibles Layout ermöglicht. Es ermöglicht die automatische Größenänderung und Positionierung von Elementen basierend auf dem verfügbaren Platz. Wird normalerweise zusammen mit Flex-Richtung, Flex-Wrap und anderen Eigenschaften verwendet.

6. Raster: Verwenden Sie das Rasterlayout, um Elemente anzuzeigen und Elemente in einem zweidimensionalen Raster zu platzieren. Das Rasterlayout bietet eine präzisere Layoutsteuerung und kann die Größe, den Abstand usw. von Zeilen und Spalten definieren. Wird normalerweise zusammen mit Grid-Template-Columns, Grid-Template-Rows und anderen Attributen verwendet.

7. Tabelle: Das Element wird als Tabelle angezeigt, ähnlich dem Tabellenelement in HTML. Das Element wird in ein Tabellenobjekt geparst, das Unterelemente wie Tabellenkopf (thead), Tabellenkörper (tbody) und Tabellenfuß (tfoot) enthalten kann.

8. Inline-Tabelle: Das Element wird als Inline-Tabelle angezeigt, angezeigt in derselben Zeile wie benachbarte Elemente. Ähnlich dem Tabellenattribut, wird jedoch als Inline-Element angezeigt.

9. Listenelement: Das Element wird als Listenelement angezeigt, ähnlich dem li-Element in HTML. Gilt für Unterelemente in ungeordneten Listen (ul) und geordneten Listen (ol).

10. erben: Den Anzeigeattributwert des übergeordneten Elements erben. Wenn kein übergeordnetes Element vorhanden ist, wird es als Block betrachtet.

Dies sind einige gängige Attributwerte des Anzeigeattributs in CSS. Durch Festlegen verschiedener Anzeigeattributwerte können Sie die Art und Weise, wie Elemente auf der Seite angezeigt werden, flexibel steuern und verschiedene Layouteffekte erzielen.

Das obige ist der detaillierte Inhalt vonWas sind die Attributwerte der Anzeige in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage