CSS-Dokumentfluss und Blockebenenelemente (Block) und Inline-Elemente (Inline) Ich habe zuvor nur fragmentarische Grundkenntnisse über das CSS-Layout gelesen ' Reillys „The Definitive Guide to CSS“ fand ich, dass das darin erwähnte Konzept des Dokumentenflusses mich sehr sensibel machte. Leider wurde in dem Buch nicht erklärt, was der Dokumentenfluss ist Aber ich denke, dass dieses Konzept wirklich wichtig ist, und mir ist die Rationalität des CSS-Designs klar geworden Wenn Fehler auftreten, ist es völlig normal, dass
der Dokumentenfluss das Formular von oben nach unten in Zeilen unterteilt und die Elemente in jeder Zeile von links nach rechts anordnet. Dies ist der Dokumentenfluss.
Jedes nicht schwebende Element auf Blockebene belegt seine eigene Zeile, und schwebende Elemente schweben nach Bedarf an einem Ende der Zeile. Wenn die aktuelle Zeile nicht passt, wird sie in einer neuen Zeile schweben.
Inline-Elemente belegen keine Zeile. Fast alle Elemente (einschließlich Blockebenen-, Inline- und Listenelemente) können Unterzeilen zum Platzieren von Unterelementen generieren.
Es gibt drei Situationen, die dazu führen, dass Elemente außerhalb des Dokumentenflusses vorhanden sind, nämlich schwebende Elemente, absolute Positionierung und feste Positionierung. Im IE gibt es jedoch auch schwebende Elemente im Dokumentenfluss (was mich zu dem Schluss bringt, dass dies sinnvoll ist><).
Schwebende Elemente nehmen keinen normalen Dokumentflussraum ein, und die Positionierung schwebender Elemente basiert immer noch auf dem normalen Dokumentfluss und wird dann aus dem Dokumentfluss extrahiert und so weit wie möglich nach links oder rechts verschoben. Der Textinhalt wird um das schwebende Element gewickelt. Wenn ein Element aus dem normalen Dokumentfluss extrahiert wird, ignorieren andere Elemente, die sich noch im Dokumentfluss befinden, das Element und füllen seinen ursprünglichen Platz.
Das verwirrende Konzept des Floatings wird durch die Interpretation der Theorie durch den Browser verursacht. Man kann nur sagen, dass viele Leute den IE als Standard verwenden, aber tatsächlich ist dies nicht der Fall.
Basierend auf dem Dokumentenfluss können wir die folgenden Positionierungsmuster leicht verstehen:
Relative Positionierung, also Versatz relativ zur Position des Elements im Dokumentfluss. Der ursprüngliche Platzhalter bleibt jedoch erhalten.
Absolute Positionierung, d. h. vollständig außerhalb des Dokumentflusses, versetzt und feste Positionierung relativ zum nächstgelegenen übergeordneten Element mit einem nicht statischen Wert des Positionsattributs. Absolute Positionierung, d. h. vollständig außerhalb des Dokumentflusses, versetzt relativ zu Das Ansichtsfenster
Es gibt noch ein paar Fragen, die ich nicht verstehe.
1. Was ist der Hauptunterschied zwischen Inline-Elementen und Block-Level-Elementen?
2. Wie verstehen Sie, wann das Clear-Attribut den richtigen Wert annimmt? Es scheint, dass die experimentelle Situation immer nicht mit der Theorie übereinstimmt.
Was bedeutet das Inline-Element? Was sind Elemente auf Blockebene?
Der chinesische Text „CSS Definitive Guide“ zeigt: 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.
Wer CSS gelernt hat, kann es sofort verstehen. Für Anfänger ist es jedoch nicht leicht zu verstehen, deshalb möchte ich es vor allem Anfängern vertrauter machen!
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>Es handelt sich um einen kleinen Behälter. Auf diese Weise erhalten Sie möglicherweise einen ersten Eindruck davon, ob wir etwas Wasser in einen großen Behälter füllen möchten. Aber was ist, wenn ich auch etwas Tinte hineingeben möchte? Es ist ganz einfach. Wir nehmen den kleinen Behälter heraus, füllen ihn mit Tinte und geben ihn in das saubere Wasser im großen Behälter.
Lassen Sie mich Ihnen ein einfaches praktisches Beispiel geben: zum Beispiel <div>I love CSS - 52CSS.com</div>
Ich möchte den Buchstaben c mit CSS formatieren, damit wir <span> verwenden können.
<div>Ich liebe CSS – <span>52CSS.com</span> W3C-Standard</div>
Ein Blockelement ist im Allgemeinen ein Containerelement für andere Elemente. Es kann Inline-Elemente und andere Blockelemente aufnehmen. Das Blockelement „form“ ist Ganz besonders, 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.
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 doppelten schwebenden Rändern beheben.
Blockelement
* Adresse – Adresse * Blockquote – Blockreferenz * Zentrum – Ausrichtungsblock * Dir – Verzeichnisliste * Div – Häufig verwendete Blockebene, auch die Hauptbezeichnung des CSS-Layouts * DL – Definitionsliste * Feldsatz – Formularkontrollgruppe * Formular – Interaktionsformular * h1 – Überschrift * h2 – Untertitel * h3 – Überschrift der Ebene 3 * h4 – Überschrift der Ebene 4 * h5 – Überschrift der Ebene 5 * h6 – Überschrift der Ebene 6 * hr – Horizontale Trennlinie * isindex – Eingabeaufforderung
* menu – Menüliste * noframes – Frames optionaler Inhalt (dieser Blockinhalt wird für Browser angezeigt, die keine Frames unterstützen) * noscript – optionaler Skriptinhalt (dieser Inhalt wird für Browser angezeigt, die kein Skript unterstützen)
* ol – sortierte Form * p – Absatz * vorformatierter Text * Tabelle – Tabelle * ul – nicht sortierte Liste
Inline-Element (Inline-Element)
* a – Ankerpunkt * abbr – Abkürzung * Akronym – erstes Wort * b – fett (nicht empfohlen)
* bdo – Bidi-Überschreibung
* big – große Schriftart * br – Zeilenumbruch * cite – quote * code – Computercode (erforderlich beim Zitieren von Quellcode)
* dfn – Felder definieren * em – hervorheben * Schriftart – Schriftarteinstellungen (nicht empfohlen)
* i – kursiv * img – Bild * input – Eingabefeld * kbd – Tastaturtext definieren * label – Tabellenbezeichnung * q – kurzes Anführungszeichen * s – Unterstreichung (nicht empfohlen)
* samp – definiert Beispielcomputercode * select – Elementauswahl * small – kleiner Schrifttext * span – häufig verwendeter Inline-Container, definiert Blöcke innerhalb von Text * Strike – Underline * Strong – Fetthervorhebung * Sub – Subscript * Sup – Superscript * Textarea – Eingabefeld für mehrzeiligen Text * tt – Teletype-Text * u – Unterstreichung * var – Variablen definieren
Variable Elemente Variable Elemente bestimmen je nach Kontext, ob das Element ein Blockelement oder ein Inline-Element ist.
* Applet – Java-Applet
* Button – Button * Entf – Text löschen * iframe – Inline-Frame
* ins – eingefügter Text * map – Bildblock (Karte)
* Objekt – Objektobjekt * Skript – Client-Skript