Ü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
Methode der Douban-Website zum Vornehmen kleiner Änderungen am Website-Inhalt
<br />Das Lesen ist ein sehr wichtiger Teil ...
Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer
1. Verwenden Sie auf einem vernetzten Computer di...
Eine kurze Analyse des Zugriffs auf Windows 10-Hostordner von virtuellen CentOS 8-Maschinen aus
Nach der Installation von VMware Tools ① kann Tex...
So verwenden Sie mysqldump zum Sichern von MySQL-Daten
1. Einführung in mysqldump mysqldump ist ein logi...
Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0
Heute zeige ich Ihnen einen Neon-Button-Animation...
Praxis der Realisierung der Breiten- und Höhenanpassung von Echarts-Diagrammen in Vue
Inhaltsverzeichnis 1. Installieren und importiere...
Diskussion über Web-Nachahmung und Plagiat
Einige Monate nachdem ich 2005 in die Branche eing...
Mehrere Gründe, HTML nicht zu komprimieren
Der Grund ist einfach: In HTML-Dokumenten entsprec...
Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue
Inhaltsverzeichnis Vorwort 1. Mit vue-cli 1. Defi...
So entwickeln Sie Java 8 Spring Boot-Anwendungen in Docker
In diesem Artikel zeige ich Ihnen, wie Sie mit Ja...
mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()
[mysql] Ersetzungsverwendung (Teil des Inhalts ei...
Nginx implementiert dynamische und statische Trennung Beispielerklärung
Um das Parsen der Website zu beschleunigen, könne...
CentOS 8 Installationshandbuch für Zabbix 4.4
Zabbix-Serverumgebungsplattform ZABBIX Version 4....
So verwenden Sie das MySQL-Limit und lösen das Problem großer Paging-Aufgaben
Vorwort Wenn wir in der täglichen Entwicklung MyS...
Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern in HTML
1. Erzwingen Sie keinen Zeilenumbruch und beenden ...