Überblick und Unterschiede zwischen HTML-Inline-Elementen und HTML-Block-Level-Elementen
|
Funktionen von Elementen auf Blockebene : •Steht immer in einer eigenen Zeile, ausgehend von einer neuen Zeile, und die folgenden Elemente müssen auch in einer neuen Zeile angezeigt werden; •Breite, Höhe, Polsterung und Rand können alle gesteuert werden; Eigenschaften von Inline-Elementen : • In derselben Zeile wie benachbarte Inline-Elemente; • Die Breite (width), Höhe (height), Ober-/Unterseite des inneren Randes (padding-top/padding-bottom) und Ober-/Unterseite des äußeren Randes (margin-top/margin-bottom) können nicht geändert werden, d. h. die Größe des Textes oder Bildes darin; Die wichtigsten Elemente auf Blockebene sind : Code kopieren Der Code lautet wie folgt:Adresse, Blockzitat, Mitte, Richtung, Div, dl, Feldsatz, Form, h1, h2, h3, h4, h5, h6, hr, isindex, Menü, noframes, noscript, ol, p, pre, Tabelle, ul Die wichtigsten Inline-Elemente sind : Code kopieren Der Code lautet wie folgt:a, abbr, Akronym, b, bdo, groß, br, zitieren, Code, dfn, em, Schriftart, i, img, Eingabe, kbd, Etikett, q, s, samp, auswählen, klein, span, durchstreichen, stark, sub, sup, Textbereich, tt, u, var Variable Elemente (bestimmen Sie kontextbezogen, ob es sich bei dem Element um ein Blockelement oder ein Inline-Element handelt) : Code kopieren Der Code lautet wie folgt:Applet, Schaltfläche, Del, Iframe, Ins, Map, Objekt, Skript Anwendung von Block-Level- und Inline-Elementen in CSS : Durch die Verwendung von CSS können wir die Einschränkungen der HTML-Tag-Klassifizierung in der obigen Tabelle aufheben und die benötigten Attribute frei auf verschiedene Tags/Elemente anwenden. Die wichtigsten verwendeten CSS-Stile sind die folgenden drei : •display:block -- Anzeige als Element auf Blockebene •display:inline -- Anzeige als Inline-Element • dipslay:inline-block – Wird als Inline-Blockelement angezeigt, wird es in derselben Zeile angezeigt und kann Eigenschaften wie Breite, Höhe, innere und äußere Ränder ändern. Wir fügen dem <ul>-Element häufig den Stil display:inline-block hinzu, damit die ursprünglich vertikale Liste horizontal angezeigt werden kann. Abseits vom Thema : Ich habe kürzlich einiges Wissen über den Unterschied zwischen Blockebenenelementen und Inline-Elementen gesammelt. Ich habe im Internet viele verwandte Artikel gefunden und festgestellt, dass das Verständnis aller anscheinend falsch war. Ich habe es selbst getestet und viele Probleme festgestellt : 1. Der linke Rand/rechte Rand und die linke Polsterung/rechte Polsterung von Inline-Elementen können gesteuert werden, sodass die Breite von Inline-Elementen durch diese vier Eigenschaften gesteuert werden kann. 2. Blockebenen-Element-Tags können auch in Inline-Elementen platziert werden, und die internen Blockebenen-Element-Tags erweitern die externen Inline-Tags, sodass die Höhe der Inline-Elemente durch Platzieren von Blockelementen gesteuert werden kann (im Internet wird eingeführt, dass Inline-Elemente nur Text und andere Inline-Elemente enthalten können). Zum Beispiel: Code kopieren Der Code lautet wie folgt:<ein> <div Stil="Breite:100px;Höhe:100px;">Test</div> </a> |
<<: Detaillierte Erläuterung der Vorteile von PNG in verschiedenen Netzwerkbildformaten
Artikel empfehlen
Analyse des Konfigurationsprozesses zur Installation von MariaDB basierend auf Docker
1. Installation Suchen Sie über DockerHub nach de...
Detaillierte Analyse des Befehls chmod zum Ändern der Dateiberechtigungen unter Linux
Verwenden Sie den Linux-Befehl chmod , um zu steu...
Vue integriert Tencent Map zur Implementierung der API (mit DEMO)
Inhaltsverzeichnis Hintergrund zum Schreiben Proj...
Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images
Hintergrund Verwenden Sie Idea mit Docker, um den...
Detaillierte grafische Erklärung der SQLMap-Injektion
Inhaltsverzeichnis 1. Wir haben festgestellt, das...
Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen
1. Was ist Semantisierung? Erklärung zum Bing-Wör...
Lösen Sie das Problem, dass Docker-Container sofort nach dem Start beendet werden
Kürzlich habe ich mir angesehen, wie Docker es Co...
Elegante praktische Aufzeichnung der Einführung der Iconfont-Symbolbibliothek in Vue
Inhaltsverzeichnis Vorwort SVG generieren Einführ...
Lassen Sie uns ausführlich über die Richtung der langsamen SQL-Optimierung in MySQL sprechen
Inhaltsverzeichnis Vorwort SQL-Anweisungsoptimier...
Vant Uploader implementiert die Drag-and-Drop-Funktion zum Hochladen von Bildern (als Cover festlegen)
Das Wirkungsdiagramm sieht wie folgt aus: <!DO...
Natives JS zum Erstellen eines verschiebbaren Anmeldefelds
Dieser Artikel zeigt ein verschiebbares Anmeldefe...
Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3
Bisher kannten wir mehrere Hintergrundattribute i...
So erhalten Sie den tatsächlichen Pfad des aktuellen Skripts in Linux
1. Holen Sie sich den tatsächlichen Pfad des aktu...
MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort
Spezifische Methode: Schritt 1: Stoppen Sie den M...
Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue
Vorwort Heutzutage wird in Projekten häufig die A...