Ü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
Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts
Szenarioanforderungen 1. Wir können die Skriptfun...
Zusammenfassung häufiger Probleme und Anwendungskenntnisse in MySQL
Vorwort Bei der täglichen Entwicklung oder Wartun...
Vue Element-ui-Tabelle realisiert Baumstrukturtabelle
In diesem Artikel wird der spezifische Code der E...
Tutorial zur Installation des neuesten MySQL 8.0.18 mithilfe eines komprimierten Pakets unter Win10 64-Bit (mit Bildern und Text)
WIN10 64-Bit installieren Sie das neueste MySQL8....
Detaillierte Analyse der Syntax von Mysql-Updates zum Ändern mehrerer Felder und
Beim Aktualisieren eines Datensatzes in MySQL ist...
MySQL-Optimierung: InnoDB-Optimierung
Lernpläne werden leicht unterbrochen und es ist s...
Tutorial zur Konfiguration des Nginx/Httpd-Reverseproxys für Tomcat
Im vorherigen Blog erfuhren wir die Verwendung un...
Implementierungsbeispiel für den Linux-Befehl „tac“
1. Befehlseinführung Der Befehl tac (umgekehrte R...
MySQL Series 11-Protokollierung
Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...
Der Unterschied zwischen zwei MySQL-Anweisungen zum Löschen von Benutzern (Benutzer löschen und Benutzer löschen)
Tipp: In MySQL müssen wir häufig Benutzer erstell...
So konfigurieren Sie eine JDK-Umgebung unter Linux
1. Gehen Sie zur offiziellen Website, um das JDK-...
Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile
Inhaltsverzeichnis Effektanzeige Code-Link Schlüs...
Lösung für Nginx-Installationsfehler
1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...
Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
1. Sehen Sie sich die Feldtypen in der Tabelle an...
Grafisches Tutorial zur Installation und Konfiguration von CentOS 6.4 MySQL 5.7.18
Die spezifischen Schritte zur Installation von my...