Detaillierte Erläuterung der Unterschiede zwischen Inline-Elementen, Block-Level-Elementen und leeren Elementen

Inline-Elemente: a, b, span, img, input, strong, select, label, em, button, textarea

Elemente auf Blockebene: p, ul, li, dl, dt, dd, p , h1-h6, Blockquote

Leere Elemente: br, meta, hr, link, input, img

Merkmale von Elementen auf Blockebene:

1. Beginnt immer in einer neuen Zeile und belegt eine ganze Zeile
2. Standardmäßig füllt seine Breite automatisch die Breite seines übergeordneten Elements aus
3. Die Breite entspricht unabhängig davon immer der Browserbreite des Inhalts
4. Es kann Inline-Elemente und andere Blockelemente aufnehmen
5. Das Anzeigeattribut ist Block

Vertikale angrenzende Ränder von Elementen auf Blockebene werden zusammengeführt.

Eigenschaften von Inline-Elementen:

Sie liegen auf derselben Zeile wie andere Elemente
2 be Change
3. Die Breite bezieht sich nur auf den Inhalt
4. Inline-Elemente können nur Text oder andere Inline-Elemente aufnehmen
5. Das Anzeigeattribut ist inline

horizontal padding-left , padding-Right, margin-left und margin-right erzeugen alle Randeffekte,
aber vertikale padding-top, padding-bottom, margin-top und margin-bottom erzeugen keine Randeffekte.
Breite und Höhe können nicht eingestellt werden. Die Breite nimmt mit dem Inhalt zu und die Höhe ändert sich mit der Schriftgröße. Inline-Elemente können Außenränder festlegen, die Außenränder wirken sich jedoch nicht auf die Ober- und Unterseite aus, sondern nur auf den linken und unteren Rand Rechts.

Eigenschaften leerer Elemente:

HTML-Inhalte ohne Inhalt werden als leere Elemente bezeichnet. Leere Elemente werden im öffnenden Tag geschlossen.

ist ein leeres Element ohne schließendes Tag (
Tag-Definition umschließt).
In XHTML, XML und zukünftigen Versionen von HTML müssen alle Elemente geschlossen sein.
Das Hinzufügen eines Schrägstrichs im öffnenden Tag, z. B.
, ist die richtige Methode zum Schließen eines leeren Elements und wird von HTML, XHTML und XML akzeptiert.
Obwohl
in allen Browsern gültig ist, ist die Verwendung von
tatsächlich eine längerfristige Garantie.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Unterschiede zwischen Inline-Elementen, Block-Level-Elementen und leeren Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!