简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Eine Einführung in den Unterschied zwischen Inline-Elementen und Elementen auf Blockebene in CSS

高洛峰
Freigeben： 2017-03-06 11:24:30
Original
1735 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Unterschied zwischen Inline-Elementen und Blockebenenelementen vorgestellt, der einen guten Referenzwert hat. Schauen wir uns den folgenden Editor an.

1 Unterschiede zwischen Elementen und Blockebenenelementen

1. Inline-Elemente nehmen nicht die gesamte Zeile ein, sondern werden in einer geraden Linie angeordnet. Sie liegen alle auf derselben Linie und sind horizontal angeordnet

Elemente auf Blockebene belegen eine Reihe und werden vertikal angeordnet.

　2. Elemente auf Blockebene können Inline-Elemente enthalten, und Elemente auf Blockebene können 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 für Inline-Elemente festgelegte Breite ist ungültig, die Höhe ist ungültig (Zeilenhöhe kann festgelegt werden). ), der Rand nach oben und unten ist ungültig, und der Abstand nach oben und unten ist ungültig.

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

Inline-Elemente werden in Blockelemente konvertiert: display:block;

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

3. Problemerweiterung

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

Ausführliche Antwort:

Element ist 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 Elemente.

　

a) Ersatzelement

　 Ersatzelement bedeutet, dass der Browser den spezifischen Anzeigeinhalt des Elements anhand seines Tags und seiner 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.

　(X), ,