Gesamtkonzept

Die beiden Konzepte Block und Inline sind Kurzbegriffe. Der Vollständigkeit halber handelt es sich um Block-Level-Elemente (Block-Level-Elemente) und Inline-Elemente (Inline-Element). Das Blockelement wird normalerweise als unabhängiger Block realisiert und in eine separate Zeile umgewandelt. Das Inline-Element führt vorher und nachher nicht zu Zeilenumbrüchen, und eine Reihe von Inline-Elementen wird in einer Zeile angezeigt, bis die Zeile voll ist.
Im Allgemeinen haben HTML-Elemente ihre eigenen Layoutebenen (Blockelemente oder Inline-Elemente):

Gemeinsame Blockebenenelemente umfassen DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL usw.
Gemeinsame Inline-Elemente sind SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR usw.

Blockelemente können Blockelemente und Inline-Elemente enthalten. Inline-Elemente können jedoch nur Inline-Elemente enthalten. Es ist zu beachten, dass dies eine allgemeine Aussage ist und die Elemente, die jedes spezifische Element enthalten kann, ebenfalls spezifisch sind, sodass diese Regel nicht für einzelne Elemente gilt. Beispielsweise kann das P-Element nur Inline-Elemente, aber keine Blockelemente enthalten.

Im Allgemeinen können Sie die Layoutebene von Elementen über die Einstellungen von display:inline und display:block ändern.

Vergleich der Block-, Inline- und Inlinke-Block-Details

Zusätzliche Erklärung

Im Allgemeinen verwenden wir die Anzeige: block, display:inline oder display:inline-block, um die Layoutebene von Elementen anzupassen. Tatsächlich gibt es weit mehr Anzeigeparameter als diese drei, sie werden nur häufiger verwendet.
IE (niedrigere Version von IE) unterstützt ursprünglich keinen Inline-Block. Wenn Sie also display:inline-block für Inline-Elemente im IE verwenden, wird IE dies theoretisch jedoch nicht erkennen Durch die Verwendung von display:inline-block wird das Layout im IE ausgelöst, sodass das Inline-Element wie das Attribut display:inline-block aussieht.

display:inline-block

display:inline

display:block

Einfach ausgedrückt rendert es das Objekt als Inline-Objekt, aber der Inhalt des Objekt als Block. Objekt-Rendering. Nachfolgende Inline-Objekte werden in derselben Zeile angeordnet. Beispielsweise können wir einem Link (einem Element) einen Inline-Block-Attributwert zuweisen, sodass er sowohl die Breiten- und Höheneigenschaften von Block als auch die Peer-Eigenschaften von Inline aufweist.
Inline-Elemente belegen nicht eine Zeile allein, mehrere benachbarte Inline-Elemente werden in derselben Zeile angeordnet, bis a line Wenn es nicht angeordnet werden kann, wird eine neue Zeile hinzugefügt, deren Breite sich mit dem Inhalt des Elements ändert.
Die Breiten- und Höhenattribute für die Inline-Elementeinstellung sind ungültig.
Die Rand- und Padding-Attribute des Inline-Elements, die horizontalen Padding-left, padding-right, margin-left und margin-right erzeugen alle Randeffekte, aber das vertikale Padding -; top, padding-bottom, margin-top, margin-bottom erzeugen keine Randeffekte.

Das Blockelement belegt eine eigene Zeile und mehrere Blockelemente beginnen jeweils mit a neue Zeile. Standardmäßig füllt die Breite eines Blockelements automatisch die Breite seines übergeordneten Elements aus.
Blockelemente können Breiten- und Höhenattribute festlegen. Auch wenn die Breite eines Elements auf Blockebene festgelegt ist, belegt es immer noch eine exklusive Zeile.
Blockelemente können Rand- und Füllattribute festlegen.

Das obige ist der detaillierte Inhalt vonCSS: Block-, Inline- und Inline-Block-Nutzung und Unterschiede. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!