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

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: e388a4556c0f65e1904146cc1a846bee

und 8e99a69fbe029cd4e2b854e244eab143 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 a1f02c36ba31691bcfe87b2722de723b-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 d5fd7aea971a85678ba271703566ebfd, ob ein Eingabefeld, ein Optionsfeld usw. angezeigt wird.

　(X)a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3, 221f08282418e2996498697df914ce4e, 273238ce9338fbb04bee6997e5552b95 in (X)HTML sind alles Ersatzelemente. Diese Elemente haben oft keinen eigentlichen Inhalt, also ein leeres Element, zum Beispiel:

<img src=”cat.jpg” />
　　<input type="submit" name="Submit" value="提交" />

Der Browser zeigt diese basierend auf dem Tag-Typ und an Attribute des Elements. Austauschbare Elemente erzeugen in ihrer Anzeige ebenfalls Kästchen.

 

b) Nicht ersetzbare Elemente

(X) Die meisten Elemente von HTML sind nicht ersetzbare Elemente, das heißt, ihr Inhalt ist direkt dem Benutzer angezeigt (z. B. Browser). Beispiel:

<p>段落的内容</p>

Absatz e388a4556c0f65e1904146cc1a846bee ist ein nicht ersetzbares Element und der Text „Inhalt des Absatzes“ wird vollständig angezeigt.

　

2. Anzeigeelemente

Zusätzlich zur Klassifizierung ersetzbarer Elemente und nicht ersetzbarer Elemente gibt es in CSS weitere Klassifizierungen von Elementen 2.1 Methode: Elemente auf Blockebene (Blockebene) und Inline-Elemente (Inline-Ebene, auch als „Inline“-Elemente übersetzt).

　

a) Elemente auf Blockebene

Das offensichtlichste Merkmal eines Elements, das visuell als Block formatiert ist, besteht darin, dass es sich horizontal füllt Standard Der Inhaltsbereich seines übergeordneten Elements, und auf der linken und rechten Seite befinden sich keine anderen Elemente, dh Elemente auf Blockebene belegen standardmäßig eine Zeile.

Typische Elemente auf Blockebene sind: e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1 usw.

Elemente, die über CSS auf Float (Float-Attribut, kann nach links oder rechts schweben) eingestellt wurden und das Anzeigeattribut auf „Block“ oder „List-Item“ setzen, sind Elemente auf Blockebene.

Aber schwebende Elemente sind etwas Besonderes. Aufgrund des Schwebens können sich daneben noch andere Elemente befinden. Und „list-item“ (list item 25edfb22a4f469ecb59f1190150159c6) generiert davor ein Punktsymbol oder eine Zahlenfolge.

 

b) Inline-Elemente

Inline-Elemente bilden keinen neuen Inhaltsblock, das heißt, um sie herum können sich andere Elemente befinden, wie z wie 3499910bf9dac5ae3c52d5ede7383485 , 45a2772a6b6107b401db3c9b82c049c2, 8e99a69fbe029cd4e2b854e244eab143 usw. sind alles typische Inline-Level-Elemente.

Elemente, deren Anzeigeattribut gleich „inline“ ist, sind Inline-Elemente. Fast alle ersetzbaren Elemente sind Inline-Elemente, wie z. B. a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd usw.

Der Typ der Elemente ist jedoch nicht festgelegt. Durch Festlegen des Anzeigeattributs von CSS können Inline-Elemente in Elemente auf Blockebene umgewandelt werden, und Elemente auf Blockebene können auch in Inline-Elemente umgewandelt werden.

3. Fazit:

Ersatzelemente haben in der Regel Eigenabmessungen, also eine einstellbare Breite und Höhe. Wenn Sie beispielsweise die Breite und Höhe des Bildes nicht angeben, wird es entsprechend seiner inneren Größe angezeigt, die der Breite und Höhe des Bildes beim Speichern entspricht.

Für Formularelemente verfügen Browser auch über Standardstile, einschließlich Breite und Höhe.

Weitere Informationen zu den Unterschieden zwischen Inline-Elementen und Block-Level-Elementen in CSS finden Sie auf der chinesischen PHP-Website!