Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?

Elemente auf Blockebene

1. Immer in einer neuen Zeile beginnen

2. Höhe, Zeilenhöhe, Rand und Die inneren Ränder können gesteuert werden

3. Die Standardbreite beträgt 100 % des Browsers

4. Kann Inline-Elemente und andere Blockelemente aufnehmen

Inline-Elemente

1. Auf derselben Zeile wie benachbarte Elemente

2. Höhe und Breite sind ungültig, aber der Abstand und der Rand in horizontaler Richtung können eingestellt werden. und die vertikale Richtung ist ungültig

3. Die Standardbreite ist die Breite des eigenen Inhalts

4. Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen (außer a)

(Video-Tutorial-Empfehlung: CSS-Video-Tutorial )

Hinweis:

1. Nur Text kann einen Absatz bilden, also auf Blockebene Elemente können nicht in p platziert werden. Ebenso gibt es diese Tags h1 -h6, dt usw., es handelt sich um Tags auf Textblockebene, und andere Elemente auf Blockebene können nicht in

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

Elemente auf Blockebene. Unterschiede zu Inline-Elementen

Eigenschaften von Elementen auf Blockebene:

1. Beginnen Sie immer in einer neuen Zeile

2. Höhe, Zeilenhöhe, Ränder und Abstand können alle gesteuert werden

3. Die Standardbreite beträgt 100 % des Browsers

4. Inline-Elemente und andere Blockelemente können untergebracht werden

Eigenschaften von Inline-Elementen:

1. Auf derselben Zeile wie benachbarte Inline-Elemente

2. Höhe und Breite sind ungültig, aber der horizontale Abstand und der Rand können eingestellt werden. Die vertikale Richtung ist ungültig

3. Die Standardbreite ist die Breite des eigenen Inhalts

4 . Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen (außer a)

Inline-Block-Tags inline-block

Es gibt mehrere spezielle Tags in Inline Elemente-, , , Sie können sie steuern. Legen Sie die Eigenschaften für Breite, Höhe und Ausrichtung fest. Einige Quellen nennen sie möglicherweise Inline-Blockelemente.

Funktionen:

1. Auf derselben Zeile wie benachbarte Inline-Elemente (innerhalb der Zeile), aber zwischen ihnen befindet sich eine leere Lücke

2 , die Standardbreite ist die Breite des eigenen Inhalts

3. Höhe, Zeilenhöhe, äußere Ränder und innere Ränder können alle gesteuert werden

Beschriftungsanzeige Moduskonvertierungsanzeige

Block in Inline konvertieren: display:inline;

Inline in Block konvertieren: display:block;

Block und Inline-Elemente in Inline-Block konvertieren : display:inline-block;

Empfohlenes Tutorial: CSS-Schnellstart

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!