CSS-Dokumentenfluss, Elemente auf Blockebene (Block) und Inline-Elemente (Inline). Alles, was ich gesehen habe, ist, dass ich nur bruchstückhafte Grundkenntnisse über das CSS-Layout habe O'Reilly, ich habe festgestellt, dass mich das darin erwähnte Konzept des Dokumentenflusses sehr sensibel gemacht hat. Vielleicht hat der Autor es für zu einfach gehalten, um erwähnt zu werden Es ist wirklich wichtig, eine Reihe von CSS-Layout-Theorien zu verstehen, und ich erkenne die Rationalität des CSS-Designs. Daher ist es völlig normal, auf der Grundlage meiner Vermutungen und Experimente eine Erklärung zu finden .
Dokumentenfluss
Teilen Sie das Formular von oben nach unten in Zeilen auf und ordnen Sie die Elemente in jeder Zeile von links nach rechts an, was dem Dokumentenfluss entspricht.
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,
Das heißt, das Element wird relativ zu seiner Position im Dokumentenfluss verschoben, der ursprüngliche Platzhalter bleibt jedoch erhalten.
absolute Positionierung,
Das heißt, es ist vollständig vom Dokumentenfluss getrennt und mit einem nicht statischen Wert des Positionsattributs relativ zum nächstgelegenen übergeordneten Element versetzt.
feste Positionierung,
Das heißt, es ist vollständig vom Dokumentenfluss getrennt und relativ zum Ansichtsfenster versetzt.
Es gibt noch ein paar weitere Fragen, die ich als nächstes nicht klären kann.
Was ist als eines der drei Grundelemente der Hauptunterschied zwischen Inline-Elementen und Elementen auf Blockebene?
Wie verstehen Sie, wann die Clear-Eigenschaft den richtigen Wert annimmt? Es scheint, dass die experimentelle Situation immer nicht mit der Theorie übereinstimmt.