Ü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
Erfahren Sie mehr über MySQL-Datenbanken
Inhaltsverzeichnis 1. Was ist eine Datenbank? 2. ...
Erfahren Sie, wie Sie Docker unter Windows 10 Home Edition installieren.
Als ich die Bücher über Redis und Spring Cloud Al...
Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL
1. CSV-Datei importieren Verwenden Sie den folgen...
Ideen und Codes zur Implementierung von Iframes, um einen Teil des Website-Inhalts abzufangen
Code kopieren Der Code lautet wie folgt: <div ...
Schritte zum Aufteilen und Komprimieren von CSS mit Webpack und zum Importieren mit Link
Schauen wir uns zunächst die Codedateistruktur an...
Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung
Inhaltsverzeichnis 1. Modulares Konzept 2. Modula...
Detaillierte Erklärung zur Abfrage von Feldern, die „%“ enthalten, in MySQL (ESCAPE-Verwendung)
In der SQL-ähnlichen Anweisung beispielsweise SEL...
js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster
In diesem Artikel wird der spezifische Code von j...
Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente
Inhaltsverzeichnis Zu lang zum Lesen Isolierung d...
Steuern Sie die vertikale Mitte des Textes im HTML-Textfeld über CSS
Wenn das Höhenattribut von Text definiert ist, wir...
Anwendungsszenarien für React useMemo und useCallback
Inhaltsverzeichnis verwendenMemo useCallback verw...
Detaillierte Erklärung zur Installation und vollständigen Deinstallation von MySQL mit apt-get unter Ubuntu
1. Installieren Sie MySQL: udo apt-get installier...
Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode
Code kopieren Der Code lautet wie folgt: <HTML...
Vue führt weltweit SCSS (Mixin) ein
Inhaltsverzeichnis 1. mixin.scss 2. Einzeldateinu...
Schreiben von Methoden, die in nativem JS verboten sein sollten
Inhaltsverzeichnis Funktionen auf Blockebene Ände...