Erfahren Sie mehr über die allgemeinen Attributwerte des Anzeigeattributs in CSS

Umfassendes Verständnis der allgemeinen Attributwerte des Anzeigeattributs in CSS, spezifische Codebeispiele sind erforderlich

Einführung:

Das Anzeigeattribut von CSS ist eines der wichtigen Attribute, die steuern, wie Elemente angezeigt werden . Es bestimmt, wie das Element im Dokument dargestellt wird, einschließlich der Generierung einer Box, der Belegung einer exklusiven Zeile, der Sichtbarkeit usw. In diesem Artikel werden die allgemeinen Attributwerte des Anzeigeattributs ausführlich vorgestellt und spezifische Codebeispiele angehängt, um den Lesern zu helfen, die Verwendung dieser Attributwerte besser zu verstehen und zu beherrschen.

1. block

block ist der Standardwert des Anzeigeattributs, der bewirkt, dass das Element ein Feld auf Blockebene generiert und eine eigene Zeile einnimmt. Zu den gängigen Blockelementen gehören div, p, h1-h6 usw.

Beispielcode:

<div style="display: block; background-color: red; width: 200px;">
    这是一个块级元素
</div>

2. inline

inline bewirkt, dass das Element ein Inline-Feld generiert und keine Zeile belegt. Zu den gängigen Inline-Elementen gehören span, a, img usw.

Beispielcode:

<span style="display: inline; background-color: yellow;">
    这是一个行内元素
</span>

3. inline-block

inline-block bewirkt, dass das Element eine Inline-Box auf Blockebene generiert, die weder eine exklusive Zeile belegt noch die Breite und Höhe festlegen kann. Zu den gängigen Inline-Blockelementen gehören Eingaben, Schaltflächen usw.

Beispielcode:

<input type="text" style="display: inline-block; width: 200px; height: 30px;">

4. none

none bewirkt, dass das Element keine Box generiert, d. h. das Element vollständig ausblendet. Verborgene Elemente nehmen keinen Platz ein und haben keinen Einfluss auf das Layout anderer Elemente.

Beispielcode:

<div style="display: none;">
    这是一个隐藏的元素
</div>

5. flex

flex legt das Element als flexiblen Box-Container fest, sodass das Layout der Elemente in der Box über die Eigenschaften der Box angepasst werden kann. Zu den gängigen Werten für das Flex-Attribut gehören Zeile, Spalte, Zeilenumkehr, Spaltenumkehr usw.

Beispielcode:

<div style="display: flex; flex-direction: row; justify-content: space-between;">
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: blue;"></div>
    <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

Fazit:

Das Anzeigeattribut ist ein sehr nützliches Attribut in CSS, das den Anzeigemodus von Elementen steuern kann, einschließlich Block, Inline, Inline-Block, None und Flex. usw. Durch ein umfassendes Verständnis dieser Attributwerte und deren Kombination mit spezifischen Codebeispielen können Leser diese Attributwerte besser verstehen und anwenden und bessere Seitenlayouteffekte erzielen. Ich hoffe, dieser Artikel ist für die Leser hilfreich.

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die allgemeinen Attributwerte des Anzeigeattributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!