Das Anzeigeattribut in CSS wird verwendet, um den Boxtyp anzugeben, den das Element generieren soll. Das Anzeigeattribut ist ein häufig verwendetes Attribut in der Front-End-Entwicklung. Zu den häufig verwendeten Attributwerten gehören Block, Keine, Inline und Inline-Block.
Jedes Element auf der Webseite ist ein rechteckiges Feld. Das Anzeigeattribut gibt den Typ der Box an, die das Element generieren soll. Das Anzeigeattribut ist ein Attribut, das wir häufig in der Front-End-Entwicklung verwenden.
(Empfehlung für Lernvideos: CSS-Video-Tutorial)
Einführung in allgemeine Attributwerte:
block Der Standardwert des Blockobjekts. Fügen Sie nach dem Objekt eine neue Zeile mit diesem Wert
none hinzu, um das Objekt auszublenden. Im Gegensatz zum versteckten Wert des Sichtbarkeitsattributs behält es seinen physischen Platz für versteckte Objekte nicht bei.
inline Der Standardwert von Inline-Objekten. Durch die Verwendung dieses Werts wird das Inline-Blockelement line
inline-block aus dem Objekt entfernt. Dieser Attributwert kombiniert die Eigenschaften von Inline und Block, dh er ist sowohl ein Inline-Element als auch kann Breite und Höhe festlegen.
1. display:block
1. Das Element wird als Blockebenenelement angezeigt, mit Zeilenumbrüchen vor und nach dem Element. Es wird normalerweise verwendet, um Inline-Elemente in Blockebenenelemente umzuwandeln. Was sind also Elemente auf Blockebene? Was sind Inline-Elemente?
2. Elemente auf Blockebene:
werden immer in Form eines Blocks ausgedrückt, der eine ganze Zeile einnimmt. Mehrere Geschwisterblockelemente werden von oben nach unten angeordnet (außer bei Verwendung des Float-Attributs).
Sie können die Höhe, Breite, den äußeren Patch (Rand) in jede Richtung und den inneren Patch (Polsterung) in jede Richtung festlegen.
Wenn die Elementbreite (width) nicht festgelegt ist, beträgt ihre Breite 100 % ihres Containers, es sei denn, wir legen eine feste Breite dafür fest.
Elemente auf Blockebene können in anderen Elementen auf Blockebene oder in Inline-Elementen verschachtelt werden.
Der Anzeigeattributwert von Elementen auf Blockebene ist standardmäßig „Block“.
3. Inline-Elemente
Es nimmt nicht eine ganze Zeile ein, sondern nur den Raum, in dem sich seine eigene Breite und Höhe befindet. Das heißt, die Breite und Höhe des Elements werden durch seinen Textinhalt unterstützt. Mehrere gleichgeordnete Inline-Elemente werden von links nach rechts (d. h. ein Inline-Element kann sich in derselben Zeile wie andere Inline-Elemente befinden) und von oben nach unten angeordnet.
Die Höhe und Breite von Inline-Elementen kann nicht festgelegt werden. Die Höhe wird im Allgemeinen durch die Größe ihrer Schriftart bestimmt und ihre Breite wird durch die Länge des Inhalts gesteuert.
Für Inline-Elemente können nur die linken und rechten Randwerte sowie die linken und rechten Auffüllwerte festgelegt werden, die oberen und unteren Randwerte sowie die oberen und unteren Auffüllwerte können jedoch nicht festgelegt werden. Daher können wir die Breite von Inline-Elementen ändern, indem wir die linken und rechten Auffüllwerte festlegen.
Inline-Elemente können im Allgemeinen keine Elemente auf Blockebene enthalten.
Der Anzeigeattributwert von Elementen auf Blockebene ist standardmäßig inline.
2. display:none
display:none bedeutet, dass das Element nicht angezeigt wird. Wenn Sie möchten, dass ein Element ausgeblendet wird, können Sie dieses Attribut für ein Element festlegen. Das Element wird jedoch nicht aus dem Dokument gelöscht. Es wird lediglich in der Webseitenstruktur ausgeblendet und nicht angezeigt die Webseite. Wenn Sie jedoch möchten, dass das Element angezeigt wird, können Sie display:block auf das Element festlegen und das Element kann auf der Webseite angezeigt werden.
3. display:inline
display:inline kann ein Element auf Blockebene in ein Inline-Element umwandeln. Dann kann dieses Element auf Blockebene keine Breite, Höhe sowie Ränder und Abstände nach oben und unten festlegen. Die tatsächliche Breite und Höhe dieses Elements auf Blockebene sind automatisch, nicht die von uns festgelegten Werte.
4. display:inline-block
Dem Namen nach zu urteilen, können wir erkennen, dass es Inline und Block kombiniert und ihre Eigenschaften beibehält. Daher verfügt das Element mit gesetzten Inline-Block-Attributen nicht nur über die Funktion, dass das Blockelement die Breiten- und Höhenattribute festlegen kann, sondern behält auch die Funktion bei, dass das Inline-Element nicht umbrochen wird.
Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonWas macht das Anzeigeattribut in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
