Übersicht und Unterschiede zwischen HTML-Inline-Elementen und HTML-Elementen auf Blockebene_HTML/Xhtml_Webseitenproduktion

Funktionen von Elementen (Blocks) auf Blockebene :
•Belegen Sie immer eine Zeile, was bedeutet, dass Sie in einer neuen Zeile beginnen müssen, und nachfolgende Elemente müssen auch in einer anderen Zeile angezeigt werden ), Höhe, Abstand und Rand können alle gesteuert werden;


Inline-Element-(Inline-)Eigenschaften : • und benachbarte Inline-Elemente befinden sich auf derselben Zeile;
• Breite , Höhe, Ober-/Unterkante des Innenabstands (padding-top/padding-bottom) und Ober-/Untergrenze des Rands (margin-top/margin -bottom) können nicht geändert werden, d. h. die Größe des Texts oder der Bilder darin


Die Hauptelemente auf Blockebene sind :

Code kopierenDer Code ist wie folgt:

address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

Die wichtigsten Inline-Elemente sind :

Code kopieren Der Code lautet wie folgt:

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img, input, kbd, label, q, s, samp, select, small, span, Strike, strong, sub, sup,
textarea, tt, u, var

Veränderbare Elemente (ob das Element ein Block oder ein Inline-Element ist, wird basierend auf dem Kontext bestimmt) :

Code kopierenDer Code lautet wie folgt:

Applet, Button, Del, Iframe, Ins, Map, Objekt, Skript

CSS-Anwendung auf mittlerer Blockebene , Inline-Elemente : Mit CSS können wir die Einschränkungen der HTML-Tag-Klassifizierung in der obigen Tabelle beseitigen und die benötigten Attribute frei auf verschiedene Tags/Elemente anwenden.


Die wichtigsten verwendeten CSS-Stile sind die folgenden drei : •display:block – wird als Elemente auf Blockebene angezeigt
•display:inline – wird als Inline-Elemente angezeigt
•dipslay:inline-block – Wird als Inline-Blockelement angezeigt, parallel angezeigt und kann Eigenschaften wie Breite, Höhe, innere und äußere Ränder ändern
Wir fügen display:inline-block häufig zum

Elementstil, die ursprünglich vertikale Liste kann horizontal angezeigt werden.


Off-Topic: Ich habe kürzlich einige relevante Kenntnisse über den Unterschied zwischen Block-Level-Elementen und Inline-Elementen zusammengestellt. Ich habe viele verwandte Artikel im Internet gefunden und festgestellt, dass jeder sie versteht Ich selbst habe es selbst getestet und eine Menge Probleme gefunden1 kontrolliert, sodass Sie diese 4 Eigenschaften übergeben können, um die Breite von Inline-Elementen zu steuern. 2. Element-Tags auf Blockebene können auch in Inline-Elementen platziert werden, und die internen Element-Tags auf Blockebene erweitern die externen Inline-Tags, sodass Sie die Höhe von Inline-Elementen steuern können, indem Sie Blockelemente platzieren (Online-Einführung). Das Einzige ist, dass Inline-Elemente nur Text und andere Inline-Elemente enthalten können)
Zum Beispiel:




Code kopieren Code wie folgt: