Eine kurze Diskussion des Unterschieds zwischen Blockelementen und Inline-Elementen

Tag-Elemente in HTML werden im Allgemeinen in drei verschiedene Typen unterteilt: Blockelemente, Inline-Elemente (auch Inline-Elemente genannt) und Inline-Blockelemente. Was ist also der Unterschied zwischen Blockelementen und Inline-Elementen? Lassen Sie mich es Ihnen unten vorstellen.

Inline-Elemente

In HTML, , , Tags wie z da typische Inline-Elemente sind. Natürlich können Blockelemente auch als Inline-Elemente angezeigt werden, indem display: inline; festgelegt wird, sodass Elemente auf Blockebene die Eigenschaften von Inline-Elementen aufweisen.

p{
  display:inline;
}
...<p>我要变成内联元素！</p>

Eigenschaften von Inline-Elementen:

1. Auf der gleichen Zeile wie andere Elemente, nicht auf einer exklusiven Zeile

2. Die Höhe, Breite sowie der obere und untere Rand des Elements können nicht festgelegt werden

(ps: die Attribute „margin-top“ und „margin-bottom“ des Inline-Elements können nicht festgelegt werden funktionieren, und die Attribute „margin-left“ und „margin-right“ können auch funktionieren, , aber das Attribut „padding-top“ kann nur den oberen Rand des Browsers erreichen , padding-top ist höher als der obere Rand des Browsers und das Element wird nicht nach unten verschoben. Sie können padding verwenden, wenn Sie einem Inline-Element einen Hintergrund hinzufügen, aber die Hintergrundfarbe deckt die umgebenden Elemente ab)

3. Die Breite des Elements ist das im Element enthaltene Bild, oder die Breite des Textes, der nicht eingestellt werden kann.

*: Es entstehen Lücken „Returns“, „Tabulatoren“ und „Leerzeichen“ zwischen Inline-Elementen.

Lösung: Schreiben Sie es in eine Zeile, ohne Leerzeichen, Wagenrückläufe oder andere Symbole in der Mitte.

Blockelemente

in HTML

,

,

,

, Inline-Elemente können als Blockelemente angezeigt werden, indem display:block;

Zum Beispiel: a{display:block;}

Eigenschaften von Elementen auf Blockebene:

Jedes Blockelement beginnt mit einem neuen Zeile Start, und die folgenden Elemente beginnen ebenfalls in einer neuen Zeile (Exklusive Zeile );

2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können sein set;

3. Wenn die Elementbreite nicht festgelegt ist, macht sie 100 % des übergeordneten Containers aus (entspricht der Breite des übergeordneten Elements); 🎜>Inline-Blockelemente

Inline-Block hat die Eigenschaften sowohl von Inline-Elementen als auch von Blockelementen und den Code

is Legt das Element als Inline-Blockelement fest. Die Tags und display:inline-blockMerkmale von Inline-Blockelementen:

1. Die Höhe, Breite und Linie von Die Elementhöhe sowie der obere und untere Rand können eingestellt werden. Empfohlenes Lernen:

HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion des Unterschieds zwischen Blockelementen und Inline-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!