Die am vorherigen Rand geschriebenen Zusammenführungsregeln sind der komplizierteste Teil des CSS-Box-Modells. Da dieser Teil des Inhalts viele Konzepte enthält, die nicht leicht zu verstehen sind, wie z. B. Clearance (Clearance), normaler Flow / In-Flow (regulärer Flow), BFC (Blockformatierungskontext), Line Box (Line Box), Inline Box (Inline Box) ), bidi (Zweiwege-Umgebung) usw.
Das CSS-Box-Modell besteht nicht nur aus 7 horizontalen Attributen + 7 vertikalen Attributen:
margin
border
padding
width/height
PS denkt an den Stiel von High Heels - "nicht nur Polsterung, sondern auch Marge heute"
Der relevante Inhalt umfasst mindestens:
Kontextfeld 与 Rahmenfeld
Berechnungsmethode für Polsterung / Randprozentsatz
Hintergrund 与 Polsterung / Rand / Rand
negative Marge
Randzusammenführung
Das Box-Modell ist die Grundeinheit im visuellen Formatierungsmodell und ein wesentlicher Bestandteil des CSS-Layoutmodells
Das CSS-Box-Modell beschreibt eine rechteckige Box, die für Elemente im Dokumentbaum generiert und gemäß dem visuellen Formatierungsmodell angeordnet wurde
(Zitiert aus 8-Box-Modell)
Daher ist das Box-Modell auch die erste Abstraktionsebene, die von CSS über dem Dokumentbaum eingerichtet wurde, und der Teil, in dem die CSS-Layoutsteuerung in direktem Zusammenhang mit Dokumentelementen steht. Die Konsolidierung von Rändern ist einer der Faktoren, die sich direkt auf die vertikale Formatierung auswirken. Es ist wichtig zu verstehen
1. Klassisches Szenario Im
folgenden Beispiel wird davon ausgegangen, dass die UA kein Standard-Stylesheet hat und die nicht deklarierten Stilattribute gemäß der Spezifikation auf ihre Anfangswerte gesetzt werden
Darüber hinaus wird davon ausgegangen, dass UA der CSS-Spezifikation entspricht
1. Ränder zwischen Listenelementen zusammenführen
li {
margin: 8px;
}
那么列表项之间的间距是多少？
.li-case1 li {
margin: 8px;
/* 添个上内边距 */
padding-top: 1px;
}
.li-case2 li {
margin: 8px;
/* 添个下边框 */
border-bottom: 1px solid;
}
Wie groß ist der Abstand zwischen den Listenelementen in case1 und case2?
2. Tief verschachtelte Randzusammenführung
/* 缩进表示对应文档结的构嵌套关系 */
div.outer,
div.container,
div.content,
div.inner {
margin: 10px;
min-width: 100px;
min-height: 100px;
}Was ist das Rendering-Ergebnis dieser 4 verschachtelten Divs?
div.outer,
div.container,
div.content,
div.inner {
margin: 10px;
min-width: 100px;
min-height: 100px;
/* 添个border */
border: 1px solid;
}
was jetzt?
div.outer,
div.container,
div.content,
div.inner {
margin: 10px;
/* 删掉min-width, min-height和border */
}
Was ist mit jetzt?
3. Kombination von Rändern mit Lücken
div.container {
border-top: 1px solid;
background: #ccc;
margin-bottom: 60px;
}
/* 缩进表示对应文档结的构嵌套关系 */
div.float {
float: left;
width: 100px;
height: 50px;
}
div.following-float {
clear: left;
margin-top: 50px;
}
div.following-container {
color: red;
}
Wie groß ist der Abstand zwischen dem oberen Rand des roten Textes und dem unteren Rand des folgenden Floats?
div.container {
border-top: 1px solid;
background: #ccc;
margin-bottom: 60px;
}
/* 缩进表示对应文档结的构嵌套关系 */
div.float {
float: left;
width: 100px;
height: 50px;
}
div.following-float {
clear: left;
/* 把50改成49 */
margin-top: 49px;
}
div.following-container {
color: red;
}
was jetzt?
Wie wäre es mit einem Wechsel von 50 zu 0 und 51? Was wird separat passieren?
PS Die Antwort auf diese Fragen ist derzeit noch unbekannt, da die Demo noch nicht mit dem Schreiben begonnen hat ;-) Dann haben wir genug Zeit, um sorgfältig zu raten
2. Zusammenführungsbedingungen
Welche Art von Rändern werden zusammengeführt?
Die horizontalen Ränder werden nicht zusammengeführt. Benachbarte vertikale Ränder werden mit Ausnahme von 2 Sonderfällen zusammengeführt:
Die äußeren Ränder des Stammelementfelds werden nicht zusammengeführt
Wenn der obere Rand eines Elements mit einer Lücke neben dem unteren Rand liegt, wird sein Rand mit dem benachbarten Rand des nächsten Geschwisters (Elements) zusammengeführt, aber nach dem Zusammenführen nicht mit dem übergeordneten Block zusammengeführt. Zusammenführung des unteren Randes
Das Überspringen von Rändern auf das Wurzelelement ist nicht sinnvoll
In Artikel 2 wird ein neues Konzept namens "Clearance" eingeführt. Der englische Name lautet "Clearance". Er scheint mit dem Attribut "clear" in Beziehung zu stehen, ist jedoch tatsächlich intuitiv. Er bezieht sich auf die Lücke, die durch die Bewegung der Elementposition durch das Attribut "clear" entsteht. Siehe CSS-Spezifikation 9 Visual Formatating Model. Zwei wichtige Punkte sind impliziert:
Hat das eindeutige Attribut
Und (Attribut löschen) hat die Position des Elements verschoben
Wenn diese beiden Bedingungen erfüllt sind, wird gesagt, dass ein Element eine Lücke hat
Hinweis: Wenn das Attribut clear angewendet wird, ändert sich die tatsächliche Position des Elements nicht. Wenn das Element beispielsweise durch Rand oben an dieser Position platziert wird, entspricht die Layoutposition des Elements selbst der Position des Effekts clear (dh das Attribut clear bringt keinen zusätzlichen Platz Beruf, die sogenannte Lücke), gibt es keine Lücke. Wenn umgekehrt die Anwendung des Attributs clear bewirkt, dass sich die tatsächliche Position des Elements ändert, dh, ein Teil des Raums über dem Element wird durch das Attribut clear gebracht, selbst wenn eine Lücke besteht
Mit einer Lücke ist nicht genug, aber der obere und untere Rand des Elements sind benachbart (was bedeutet, dass die tatsächliche Höhe des Elements 0 ist und es keine Polsterung, Grenze gibt), und wenn es gleichzeitig erfüllt ist, wird die Kombination der äußeren Ränder dieses Elements begrenzt: seine äußeren Ränder Nur mit dem angrenzenden Rand des nächsten Bruders zusammenführen, das zusammengeführte Ergebnis wird nicht mit dem unteren Rand des übergeordneten Blocks zusammengeführt
PS Hier gibt es eine Eintrittskarte, um die klassische Szene 3 herauszufordern, aber sie ist noch weit entfernt
Definition von "benachbart" Wenn
zwei äußere Ränder als "benachbart" betrachtet werden?
Alle gehören zu In-Flow-Boxen auf Blockebene im selben Blockformatierungskontext
Es gibt keine Linienbox, Lücken, Polster und Ränder, um sie zu trennen
Alle gehören zu den vertikal benachbarten Boxkanten (vertikal benachbarte Boxkanten)
3 Sätze und 4 neue Konzepte geben der Tiefe Priorität
Stream
Stream / äußerer Stream (In-Flow / Out-of- Flow) bezieht sich darauf, ob ein herkömmliches Flussschema-Layout des Positionierungselements vorliegt
Fahren Sie zuerst mit der Tiefe fort. Es gibt drei Arten von Positionierungsschemata:
Regelmäßiger Durchfluss. Einschließlich Blockformatierung, Inline-Formatierung und relative Positionierung
schweben. Nehmen Sie es aus der Position des regulären Streams heraus, um sich nach links / rechts zu bewegen
Absolute Positionierung. Brechen Sie vom regulären Stream ab und bestimmen Sie seine Position entsprechend dem enthaltenen Block
Das Element hat weder float (der Anwendungswert des float-Attributs ist none) noch die absolute Positionierung (der Anwendungswert des position-Attributs ist nicht absolut), und es ist nicht das Stammelement. Dann wird es gemäß dem regulären Fluss angeordnet und gehört zu dem Element im Fluss, andernfalls ist es Abflusselement
Blockformatierungskontext
Schwimmern, absolut positionierten Elemente, nicht-Block - Box Block Behälter (wie Inline-Blöcke, tabellen Zellen und tabellen Bildunterschriften) und Block - Boxen whose'overflow ‚ist not'visible‘ (wenn der Wert gewesen (Außer bei der Weitergabe an das Ansichtsfenster) erstellt einen neuen Blockformatierungskontext für dessen Inhalt
In einem Blockformatierungskontext werden Felder nacheinander in vertikaler Richtung beginnend am oberen Rand des enthaltenen Blocks platziert. Der vertikale Abstand zwischen zwei Geschwisterboxen wird durch das Attribut "Rand" bestimmt
Mit anderen Worten, wenn niemand einen neuen BFC erstellt, befindet er sich im aktuellen BFC. Wie der JS-Bereich befindet sich jeder standardmäßig im äußersten Bereich (äußerster Blockformatierungskontext). Wenn Sie auf normale Boxen auf Blockebene stoßen, werden sie in den Blockformatierungskontext gestellt. Wenn Sie auf spezielle Felder stoßen (schwebend, absolut positioniert usw.) Usw.) Erstellen Sie einfach eine neue Bereichsebene (erstellen Sie einen neuen Blockformatierungskontext), und die darin enthaltenen Elemente werden in diesen inneren Bereich eingefügt (neuer Blockformatierungskontext).
Nach Abschluss des Layouts handelt es sich aus Sicht des Formatierungskontexts um eine Reihe verschachtelter BFCs. Jeder BFC ist für die Verwaltung des Layouts einer Reihe von Blockboxen (oder Elementen auf Blockebene) verantwortlich.
Hinweis: Der Inline-Formatierungskontext wird hier nicht erwähnt, da es wenig sinnvoll ist, verschiedene Inline-Formatierungskontexte zu unterscheiden (in der Spezifikationsdefinition gibt es keine spezielle Szene zum Interline-Formatierungskontext). Wann wird ein neuer Inline-Formatierungskontext erstellt? Gemäß der Spezifikation wird ein neuer Inline-Formatierungskontext nur erstellt, wenn der Blockcontainer nur Inline-Level-Boxen enthält, im Gegensatz zu BFC, dessen Erstellung explizit erzwungen werden kann
PS Weitere Informationen darüber, wann ein neuer Inline-Formatierungskontext erstellt wird, finden Sie unter Wann erstellt ein Feld einen Inline-Formatierungskontext?
Ein rechteckiger Bereich mit Feldern aus derselben Zeile wird als Zeilenfeld bezeichnet
Ein Zeilenfeld ist immer hoch genug, um alle darin enthaltenen Felder aufzunehmen.
Das Zeilenfeld ist eine abstrakte Darstellung der Zeile in CSS, und jedes Zeilenelement befindet sich im selben Zeilenfeld. Wenn es zu lang ist, um zu passen, und automatisch umbrochen wird, wird ein weiteres Zeilenfeld für die nächste Zeile erstellt. Andererseits ist das Linienfeld keine rein abstrakte Definition, sondern hat eine Breite und eine Höhe, die zur Bestimmung des Linienlayouts verwendet werden
Der "kein Linienrahmen" zwischen benachbarten Rändern kann einfach als keine Inline-Elemente verstanden werden, um sie von
vertikalen benachbarten Rahmengrenzen zu trennen . Die
folgenden vier Szenarien erfüllen die Situation, dass die externen Ränder alle vertikal benachbarte Rahmengrenzen sind:
Der obere Rand der Box und der obere Rand des ersten unterströmten Kindes
Der untere Rand der Box und der obere Rand des nächsten Geschwisters im nächsten Stream
Der untere Rand des untergeordneten Elements im letzten Stream und der untere Rand des übergeordneten Elements, dessen Höhe als "automatisch" berechnet wird.
Der obere und untere Rand des Felds erfordern, dass das Feld keinen neuen Blockformatierungskontext eingerichtet hat und der berechnete Wert von 'min-height' 0 ist, der berechnete Wert von 'height' 0 oder'auto 'ist und keine untergeordneten Elemente im Stream vorhanden sind.
Es scheint zu lang. Vereinfachen wir die Bedingungen und nehmen an, dass sich alle Elemente im Stream befinden. Dann:
Eltern-Kind: Der Rand des übergeordneten Elements und der Rand des ältesten Kindes
Geschwister: der untere Rand des Elements und der obere Rand des rechten Bruders
Vater und Sohn: Yaoers unterer Rand und unterer Rand des Elternelements
Selbst: 0 Oberer und unterer Rand des Hochvakuumelements
PS "Vakuum" bezieht sich hier auf das Vakuum von Kartoffelchips. Entweder ist nichts drin oder die Kinder im Exil wurden weggebracht
Mit anderen Worten, die Definition der Position von "benachbarten Rändern" ist speziell in drei Situationen unterteilt: Vater und Sohn, Bruder und Selbst (die Kombination des oberen und unteren Randes von sich selbst ist ziemlich eigenartig)
Das erneute Verständnis der Kombination von "benachbarten" und äußeren Rändern
hat den Grundstein für das vorherige Konzept gelegt. Jetzt integrieren wir die Streupunkte und definieren zuerst "benachbarte" neu:
Eltern und Kind, Brüder oder die Ränder des Elements selbst sind "benachbart", wenn sie nahe beieinander liegen
Es gibt noch einen weiteren wichtigen Punkt: nahe beieinander. Das heißt, die beiden äußeren Ränder sind nicht durch die "Wand" getrennt, die in drei Typen unterteilt werden kann:
Rennen: Beide Parteien müssen In-Stream-Boxen auf Blockebene sein
Glaube: Im selben Blockformatierungskontext sein
Region: Es gibt kein Linienfeld, keine Lücke, keinen inneren Rand und keine Grenze zwischen den beiden
An dieser Stelle ist "benachbart" bereits sehr klar. Lassen Sie uns die Definition der Randzusammenführung umkehren:
Die benachbarten vertikalen Ränder von Nicht-Root-Elementen werden zusammengeführt. Wenn eine Lücke vorhanden ist, ist die Zusammenführung begrenzt
Eingeschränkt bedeutet, dass wenn der obere und der untere Rand des Elements mit einer Lücke nebeneinander liegen, es nur mit dem äußeren Rand des Geschwisterelements zusammengeführt werden kann und nicht mit dem unteren Rand des übergeordneten Elements zusammengeführt werden kann.
3. Rückschlüsse
auf die Fusionsbedingungen Gemäß den Bedingungen für die Zusammenlegung von Margen gibt es 8 Rückschlüsse:
Die Ränder zwischen einer schwebenden Box und anderen Boxen werden nicht zusammengeführt (nicht einmal zwischen einer schwebenden Box und ihren untergeordneten In-Streams).
Die Ränder von Elementen, die einen neuen Blockformatierungskontext erstellen (z. B. schwebende Felder und Elemente, deren "Überlauf" nicht "sichtbar" ist), werden nicht mit ihren untergeordneten Elementen zusammengeführt
Die Ränder absolut positionierter Boxen werden nicht zusammengeführt (auch nicht mit ihren In-Stream-Kindern).
Die Ränder von Inline-Blockboxen werden nicht zusammengeführt (auch nicht mit ihren untergeordneten In-Streams).
Der untere Rand des Block-Level-Elements im Stream wird immer mit dem oberen Rand des nächsten In-Stream-Block-Level-Geschwisters zusammengeführt, es sei denn, das Geschwister (Element) weist eine Lücke auf
Der obere Rand des Elements auf Blockebene im Stream wird mit dem oberen Rand des ersten untergeordneten Elements auf Blockebene im Stream zusammengeführt, vorausgesetzt, das Element hat keinen oberen Rand und keinen oberen inneren Rand und seine untergeordneten Elemente haben keine Lücken
Der untere Rand einer In-Stream-Box auf Blockebene, deren 'Höhe' 'Auto' und 'Min-Höhe' 0 ist, wird mit dem unteren Rand ihres letzten In-Stream-Block-Level-Kindes zusammengeführt, vorausgesetzt, die Box hat keinen unteren Rand Rand und unterer Rand, und der untere Rand seiner Kinder wird nicht mit dem oberen Rand mit Lücke zusammengeführt
Die äußeren Ränder des Felds selbst werden ebenfalls zusammengeführt, vorausgesetzt, die Eigenschaft "min-height" ist 0, es gibt weder einen oberen Rand noch einen inneren Rand von oben nach unten, und die "Höhe" ist 0 oder "auto", und es gibt dann kein Linienfeld Die Ränder aller untergeordneten Elemente im Stream (falls vorhanden) werden zusammengeführt
Vereinfachte Zusammenfassung, aber 4 Elemente:
Nicht im Stream (absolute Positionierung oder Floating) werden nicht zusammengeführt
Lösen Sie die Erstellung eines neuen BFC aus (schwebende, absolut positionierte Elemente, Blockcontainer, die keine Blockboxen sind, und bestimmte Blockboxen, deren "Überlauf" nicht "sichtbar" ist), die nicht mit untergeordneten Elementen zusammengeführt werden
Boxen ohne Blockebene (Inline-Blöcke) werden nicht zusammengeführt
Im Allgemeinen werden die unteren und oberen Ränder von Geschwisterelementen, die oberen und unteren Ränder von übergeordneten und untergeordneten Elementen sowie die oberen und unteren Ränder des Elements selbst zusammengeführt
Die ersten 3 Punkte zielen auf die Voraussetzungen von "benachbart" (In-Stream, gleicher BFC, Block-Level-Box) ab, und der vierte Punkt ist die Paraphrase von 4 Arten von "benachbarten" Szenen. Die Erweiterung beträgt 8 Inferenz
4. Zusammenführungsverhalten Nachdem
zwei benachbarte Ränder zusammengeführt wurden, wird der resultierende Rand als gefalteter Rand bezeichnet
PScollapsed margin wird absichtlich als Faltung übersetzt, um das Ergebnis anzuzeigen, getrennt von der kombinierten Aktion
Es gibt zwei Merkmale der Randzusammenführung:
Rekursion: das heißt, tiefe Verschmelzung. Überprüfen Sie nach einmaligem Zusammenführen, ob die äußeren Ränder neben dem zusammengeführten Ergebnis zusammengeführt werden können. Wenn ja, führen Sie sie zusammen
Gier: Verfolgen Sie das breiteste Zusammenführungsergebnis. Zwei positive Randwerte nehmen den Maximalwert an, zwei negative Werte nehmen den maximalen Absolutwert an
Für rekursive Merkmale erweitert die Definition von "benachbart" eine rekursive Formel:
Der gefaltete Rand kann auch an einen anderen Rand angrenzen, solange ein Teil seines Randes an diesen Rand angrenzt
Gier hängt mit der Berechnungsmethode des zusammengeführten Ergebnisses der Marge zusammen, da die Marge negative Werte zulässt, ist die Situation etwas komplizierter:
Beide sind positive Werte, finden direkt das Maximum der beiden
Eine positive und eine negative, addieren und summieren
Beide sind negativ, finden Sie das Maximum des Absolutwertes der beiden
Z.B:
ul {margin-bottom: -15px;}
/* 缩进表示对应文档结的构嵌套关系 */
li {margin-bottom: 20px;}
h1 {margin-top: -18px;}
Dann beträgt der vertikale Abstand zwischen h1 und dem letzten li 20 + -max (| -15 |, | -18 |) = 2px
Unabhängig davon, ob es sich um einen positiven oder einen negativen Wert handelt, besteht das Prinzip der Suche nach dem Maximalwert darin, das Zusammenführungsergebnis so weit wie möglich zu machen (ein negativer Wert mit einem größeren absoluten Wert kann den Inhalt des Elements weiter verschieben), dh gierig.
5. Online-Demo-
Demo-Adresse : Http://ayqy.net/temp/margin-collapse.html
PS-Antworten finden Sie in der Demo, Erklärungen im Quellcode
Referenzmaterial
Wann erstellt eine Box einen Inline-Formatierungskontext?: Fragenkommentare sind wertvoll und helfen, den Inline-Formatierungskontext zu verstehen
Randkollaps und Abstand: Abstand 的 示例
Beispiel für das Zusammenführen von Rändern mit Lücken: Verwenden Sie Firefox zum Anzeigen, da Chrome und Safari nicht den Spezifikationen entsprechen
Reduzierte Ränder: Sie müssen dies nach dem Lesen dieses Artikels nicht mehr lesen