Erfahren Sie in einem Artikel mehr über den Anzeigemodus für CSS-Beschriftungen

Tag-Typ (Anzeigemodus) HTML-Tags werden im Allgemeinen in zwei Typen unterteilt: Block-Tags und Inline-Tags, die auch Blockelemente und Inline-Elemente genannt werden.

1. Elemente auf Blockebene

Jedes Blockelement nimmt normalerweise eine oder mehrere ganze Zeilen ein. Sie können seine Breite, Höhe, Ausrichtung und andere Attribute festlegen. Es wird häufig zum Erstellen des Layouts und der Struktur von Webseiten verwendet.

Zu den üblichen Blockelementen gehören <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li> usw., von denen das <div>-Tag das typischste Blockelement ist.

Funktionen: (Wichtig)

1. Nimmt eine Zeile des übergeordneten Elements ein und die Breite beträgt standardmäßig 100 % des Containers.

2. Höhe, Zeilenhöhe, Außenrand und Innenrand können alle gesteuert werden (unterstützt Breiten- und Höheneinstellungen)

3. Stellen Sie die Höhe nicht ein, die Höhe wird durch den Inhalt bestimmt;

4. Kann Inline-Elemente und andere Blockelemente aufnehmen;

2. Inline-Ebene

Inline-Elemente belegen keinen unabhängigen Bereich und sind nur auf ihre eigene Schriftgröße und Bildgröße angewiesen, um die Struktur zu unterstützen. Im Allgemeinen können Attribute wie Breite, Höhe und Ausrichtung nicht festgelegt werden. Sie werden häufig verwendet, um den Textstil auf der Seite zu steuern.

Zu den üblichen Inline-Elementen zählen <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span> usw. Unter ihnen ist das Tag <span> das typischste Inline-Element.

Funktionen: (Wichtig)

1. Wenn sich die Elemente in der benachbarten Zeile in derselben Zeile befinden, entsteht beim Zeilenumbruch eine Lücke.

2. Höhe und Breite sind ungültig, aber horizontale Polsterung und Ränder können eingestellt werden, vertikale Polsterung und Ränder sind jedoch ungültig (Breite und Höhe werden nicht unterstützt).

3. Die Standardbreite ist die Breite des eigenen Inhalts;

4. Inline-Elemente können nur Text oder andere Inline-Elemente enthalten. (ein Spezial)

Tipps:

1. Nur Text kann einen Absatz bilden, daher können Elemente auf Blockebene nicht in p eingefügt werden. Ebenso sind diese Tags h1, h2, h3, h4, h5, h6, dt alle Text-Tags auf Blockebene, und andere Elemente auf Blockebene können nicht in ihnen eingefügt werden.

2. Links können nicht innerhalb von Links platziert werden.

3. Der Unterschied zwischen Blockelementen und Inline-Elementen

Die jeweiligen Eigenschaften finden Sie oben.

4. Inline-Block

Es gibt mehrere spezielle Tags in den Inline-Elementen – <img />, <input />, <td>, deren Breite, Höhe und Ausrichtungsattribute Sie festlegen können, sie werden Inline-Blockelemente genannt.

Merkmale:

1. In der gleichen Zeile wie benachbarte Inline-Elemente (Inline-Blöcke), aber mit einer Leerstelle dazwischen;

2. Die Standardbreite ist die Breite des eigenen Inhalts;

3. Höhe, Zeilenhöhe, Ränder und Polsterung können alle gesteuert werden.

5. Anzeige der Konvertierung des Beschriftungsanzeigemodus

Beim Entwerfen einer Webseite müssen Sie möglicherweise unterschiedliche Anzeigemodi für unterschiedliche Tags festlegen. Dies kann durch die Anzeige erreicht werden.

1. Blockübertragung nach Inline: display:inline;

2. In Block innerhalb der Zeile umwandeln: display:block;

3. Block- und Inline-Elemente in Inline-Blöcke umwandeln: display: inline-block;

Wissenspunktergänzung: Anzeigemodus von CSS-Tags

Beschriftungsanzeigemodus

a. Block-Level-Elemente (meistens Div-Tags)

Merkmale:

Standardbreite 100 %

Kann Block-Level-Elemente und Inline-Elemente aufnehmen

b. Inline-Elemente (meistens das Span-Tag)

Merkmale:

c. Inline-Blockelemente (meistens das img-Tag)

! ! ! 3 Etikettenarten konvertierbar

display (Modellattribute anzeigen)

a. Konvertieren Sie den Tag-Modus auf Blockebene in den Inline-Tag-Modus

div{Anzeige:inline;}

b. Konvertieren Sie den Inline-Tagmodus in den Block-Level-Tagmodus

span{display:block;}

c. Konvertieren Sie den Inline-Tag-Modus in den Inline-Block-Tag-Modus

eine {Anzeige: Inline-Block;}

Zusammenfassen

Dies ist das Ende dieses Artikels über den Anzeigemodus von CSS-Tags. Weitere relevante Inhalte zum Anzeigemodus von CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!