Heim > Web-Frontend > HTML-Tutorial > Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?

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

青灯夜游
Freigeben: 2023-01-03 09:26:29
Original
39357 Leute haben es durchsucht

Unterschied: Das Festlegen der Breite und Höhe in Inline-Elementen ist ungültig und wird nicht automatisch umbrochen, während Elemente auf Blockebene Breite und Höhe festlegen und automatisch umbrechen können. In Inline-Elementen ist die Randeinstellung in der linken und rechten Richtung gültig, jedoch nicht nach oben und unten, und die Abstandseinstellung in der linken und rechten Richtung ist gültig, jedoch nicht nach oben und unten. Bei Elementen auf Blockebene gilt dies sowohl für Rand als auch für Abstand gültig.

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

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In den Grundlagen von CSS stoßen wir häufig auf Blockelemente und Inline-Elemente. In der tatsächlichen Entwicklung sind sie oft verwirrend und schwer zu merken. Was ist also der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene? Lassen Sie mich es Ihnen unten vorstellen.

Definition von Block-Level-Elementen und Inline-Elementen

Was sind Block-Level-Elemente?

  • Beginnt immer in einer neuen Zeile;

  • Höhe, Zeilenhöhe sowie Ränder und Abstand sind alle steuerbar;

  • Die Breite beträgt standardmäßig 100 % des Containers, es sei denn, es ist eine Breite festgelegt.

  • Es kann Inline-Elemente und andere Blockelemente aufnehmen

Zum Beispiel:

,
,

~

,
,

,

,