„The Definitive Guide to CSS“ auf Chinesisch: Jedes sichtbare Element, das kein Element auf Blockebene ist, ist ein Inline-Element. Das Merkmal seiner Leistung ist die Form des „Zeilenlayouts“. Das „Zeilenlayout“ bedeutet hier, dass seine Ausdrucksform immer in Zeilen angezeigt wird. Wenn wir beispielsweise ein Inline-Element border-bottom:1px solid #000; festlegen, wird es in jeder Zeile wiederholt und unter jeder Zeile befindet sich eine dünne schwarze Linie. Wenn es sich um ein Element auf Blockebene handelt, erscheint die angezeigte schwarze Linie nur unterhalb des Blocks.
Elemente wie p, h1 oder div werden häufig als Elemente auf Blockebene bezeichnet, und diese Elemente werden als Inhaltsblock angezeigt. Elemente wie Strong und span werden als Inline-Elemente bezeichnet, und ihr Inhalt wird in der Zeile angezeigt , „Inline-Box“. (Mit display=block können Sie Inline-Elemente in Blockelemente umwandeln. display=none bedeutet, dass das generierte Element überhaupt keinen Rahmen hat, das Element weder anzeigt noch Platz im Dokument einnimmt)
A: Inline-Elemente sind Elemente innerhalb einer Zeile und können nur innerhalb einer Zeile platziert werden; Elemente auf Blockebene sind nur ein viereckiges Feld und können an einer beliebigen Stelle auf der Seite platziert werden.
B: Um es ganz klar auszudrücken: Ein Inline-Element ist wie ein Wort; ein Element auf Blockebene ist wie ein Absatz. Wenn es nicht anders definiert ist, erscheint es in einer eigenen Zeile.
C: Allgemeine Elemente auf Blockebene wie Absatz <p>, Titel <h1><h2>..., Liste, <ul><ol><li>, Tabelle <table>, form <form>, DIV<div > und BODY <body> und andere Elemente. Inline-Elemente sind beispielsweise: Formularelemente <input>, Hyperlinks <a>, Bilder <img>, <span>…..
D: Das bemerkenswerte Merkmal von Elementen auf Blockebene besteht darin, dass jedes Element auf Blockebene in einer neuen Zeile angezeigt wird und nachfolgende Elemente ebenfalls in einer neuen Zeile angezeigt werden müssen.
E: <span> ist ein Inline-Element in der CSS-Definition, während <div> ein Element auf Blockebene ist.
Die Verwendung des Wortes „Container“ erleichtert das visuelle Verständnis ihrer Existenz und ihres Zwecks. Inline-Elemente entsprechen kleinen Containern, während <div> einem großen Container entspricht. Natürlich kann ein kleiner Container in einem großen Container platziert werden. <span> ist ein kleiner Container.
Ein Blockelement ist im Allgemeinen ein Containerelement für andere Elemente. Es kann Inline-Elemente und andere Blockelemente aufnehmen Das Besondere: Es kann nur zur Aufnahme anderer Blockelemente verwendet werden.
Ohne die Hilfe von CSS werden Blockelemente jeweils zeilenweise angeordnet. Mit CSS können wir den Standardlayoutmodus dieses HTML ändern und die Blockelemente an der gewünschten Stelle platzieren. Anstatt jedes Mal dummerweise eine neue Zeile zu beginnen. Es sollte darauf hingewiesen werden, dass das Tabellen-Tag auch eine Art Blockelement ist. Betrachten Sie diese beiden Layouts aus der Perspektive normaler Benutzer (mit Ausnahme von sehbehinderten Personen, blinden Personen usw.). Abgesehen vom Unterschied gibt es keinen weiteren Unterschied. Wenn ein normaler Benutzer jedoch versehentlich auf die Schaltfläche „Quellcode der Seite anzeigen“ klickt, ist der Unterschied zwischen beiden sehr groß. Der auf guten Rekonstruktionskonzepten basierende CSS-Layout-Seitenquellcode kann es zumindest normalen Benutzern ohne Erfahrung in der Webentwicklung ermöglichen, den Inhalt schnell zu verstehen. Aus dieser Perspektive sollte CSS-Layoutcode ein besseres ästhetisches Erlebnis haben.
Sie können sich das Blockcontainerelement div als Kästchen vorstellen, oder wenn Sie mit dem Ausschneiden experimentiert haben, wird es einfacher zu verstehen sein. Wir haben zunächst die benötigten Artikel aus verschiedenen Zeitungen und Zeitschriften ausgeschnitten. Jeder ausgeschnittene Inhalt ist ein Block. Anschließend haben wir diese Papierstücke entsprechend unserer Layout-Intention auf ein neues Blatt leeres Papier geklebt. Dadurch entsteht Ihre eigene, einzigartige Zusammenfassung. Als Erweiterung der Technologie folgt das Weblayout-Design demselben Muster.
Inline-Elemente basieren im Allgemeinen auf Basiselementen auf semantischer Ebene. Inline-Elemente können nur Text oder andere Inline-Elemente enthalten, und das gemeinsame Inline-Element „a“ ist dies.
Blockelement (Blockelement) und Inline-Element (Inline-Element) sind Konzepte in der HTML-Spezifikation. Der grundlegende Unterschied zwischen Blockelementen und Inline-Elementen besteht darin, dass Blockelemente im Allgemeinen in einer neuen Zeile beginnen. Wenn die CSS-Steuerung hinzugefügt wird, wird dieser Attributunterschied zwischen Blockelementen und Inline-Elementen nicht mehr zu einem Unterschied. Beispielsweise können wir dem Inline-Element cite ein Attribut wie display:block hinzufügen, sodass es auch das Attribut hat, jedes Mal in einer neuen Zeile zu beginnen.
Das Grundkonzept eines veränderlichen Elements besteht darin, dass es anhand des Kontexts bestimmen muss, ob es sich bei dem Element um ein Blockelement oder ein Inline-Element handelt. Variable Elemente gehören weiterhin zu den beiden oben genannten Elementkategorien. Sobald der Kontext ihre Kategorie bestimmt, müssen sie den Regeln von Blockelementen oder Inline-Elementen folgen. Eine grobe Elementklassifizierung finden Sie im Volltext.
ps: In Bezug auf den chinesischen Namen des Inline-Elements gibt es viele Arten von Inline-Elementen, Inline-Elementen, Inline-Elementen und Inline-Elementen. Grundsätzlich gibt es keine einheitliche Übersetzung. Nennen Sie sie einfach wie Sie möchten. Wenn wir über Inline-Elemente sprechen, denken wir außerdem an ein Anzeigeattribut namens display:inline. Dieses Attribut kann das berühmte IE-Problem mit dem doppelten schwebenden Rand (Float-Marge) beheben.
Blockelement
* Adresse - Adresse
* Blockzitat – Blockzitat
* Mitte - Mittenausrichtungsblock
* dir – Verzeichnisliste
* div – häufig verwendete Blockebene ist auch das Haupt-Tag des CSS-Layouts
* dl – Definitionsliste
* Fieldset – Formularkontrollgruppe
* Formular – interaktives Formular
* h1 – Überschrift
* h2 - Untertitel
*h3 – Überschrift der Ebene 3
*h4 – Überschrift der Stufe 4
*h5 – Überschrift der Stufe 5
*h6 – Überschrift der Stufe 6
*hr – horizontaler Teiler
* isindex – Eingabeaufforderung
*Menü – Menüliste
* noframes – Frames optionaler Inhalt (zeigt diesen Blockinhalt für Browser an, die keine Frames unterstützen).
*noscript -) Optionaler Skriptinhalt (zeigt diesen Inhalt für Browser an, die kein Skript unterstützen)
*ol – Sortierform
* p - Absatz
* vorformatierter Text
* Tisch - Tisch
* ul – unsortiertes Listen-Inline-Element (Inline-Element)
* a - Ankerpunkt
*abbr – Abkürzung
*Akronym – Anfangswort
* b – fett (nicht empfohlen)
* bdo – Bidi-Überschreibung
* groß – große Schriftart
* br - Zeilenumbruch
*zitieren – zitieren
* Code – Computercode (erforderlich bei Angabe des Quellcodes)
* dfn – Felder definieren
*em – Betonung
* Schriftart - Schriftarteinstellungen (nicht empfohlen)
* i – kursiv
* img - Bild
* Eingabe - Eingabefeld
* kbd – Tastaturtext definieren
* Etikett – Tabellenetikett
*q – kurzes Zitat
* s – Bindestrich (nicht empfohlen)
* samp – definiert Beispielcomputercode
* auswählen - Artikelauswahl
* klein – kleiner Schrifttext
* span – häufig verwendeter Inline-Container zum Definieren von Blöcken innerhalb von Text
* Schlag – Mittellinie
*strong – Fette Hervorhebung
* sub - tiefgestellt
* sup – hochgestellt
* textarea – mehrzeiliges Texteingabefeld
*tt – Telextext
* u - Unterstrich
* var – definiert eine Variable. Variables Element – ein variables Element ist je nach Kontext ein Blockelement oder ein Inline-Element.
* Applet – Java-Applet
* Taste - Taste
* del – Text löschen
* iframe – Inline-Frame
* ins – eingefügter Text
* Karte - Bildblock (Karte)
* Objekt - Objektobjekt
* Skript – Client-Skript
Beliebtheit: 26 % [?]