Heim > Web-Frontend > CSS-Tutorial > Detaillierte Erläuterung des Unterschieds zwischen Inline-Elementen und Elementen auf Blockebene

Detaillierte Erläuterung des Unterschieds zwischen Inline-Elementen und Elementen auf Blockebene

迷茫
Freigeben: 2017-03-25 10:46:39
Original
1852 Leute haben es durchsucht

1. Der Unterschied zwischen Inline-Elementen und Block-Level-Elementen

1. Inline-Elemente nehmen nicht die gesamte Zeile ein und sind angeordnet eine gerade Linie. Sie liegen alle auf derselben Linie und sind horizontal angeordnet.

Die Elemente auf Blockebene belegen eine Linie und sind vertikal angeordnet.

 2. Elemente auf Blockebene können Inline-Elemente und Elemente auf Blockebene keine Elemente auf Blockebene enthalten.

3. Der Unterschied zwischen den Attributen von Inline-Elementen und Elementen auf Blockebene ist hauptsächlich auf die Attribute des Boxmodells zurückzuführen. Die Breiteneinstellung von Inline-Elementen ist ungültig ( Zeilenhöhe kann eingestellt werden) und der Rand nach oben und unten ist ungültig, das Auffüllen nach oben und unten ist ungültig.

2. Konvertierung von Inline-Elementen und Block-Level-Elementen

Konvertierung von Inline Elemente Für Blockelemente: display:block;

Blockelemente werden umgewandelt in Inline-Elemente: display:inline;

3

Problembeschreibung: Warum kann die Breite und Höhe von Inline-Elementen wie img und input festgelegt werden?

Ausführliche Antwort:

Elemente sind die Grundlage der Dokumentstruktur. In CSS generiert jedes Element eine Box (Box, auch übersetzt als „Box“), die den Inhalt des Elements enthält. Aber verschiedene Elemente werden unterschiedlich angezeigt:

und In der Dokumenttypdefinition (DTD) werden unterschiedliche Typen für verschiedene Elemente angegeben. Dies ist einer der Gründe, warum DTD für Dokumente wichtig ist.

 1. Austauschbare und nicht austauschbare Elemente

Aufgrund der Eigenschaften des Elements selbst kann es in austauschbare und nicht austauschbare Elemente unterteilt werden.

a) Ersatzelement

Ersatzelement bedeutet, dass der Browser den spezifischen Anzeigeinhalt des Elements anhand seiner Tags und Attribute bestimmt.

Der Browser liest beispielsweise die Bildinformationen und zeigt sie basierend auf dem Wert des src-Attributs des -Tags an, aber wenn Sie den (X)-HTML-Code anzeigen, können Sie ihn nicht sehen tatsächlicher Inhalt des Bildes; ein weiteres Beispiel:

entscheidet anhand des Typattributs des , ob ein Eingabefeld, ein Optionsfeld usw. angezeigt wird.

  Die Elemente , ,