Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Bild- und Textcodes für nicht überlappende Ränder in CSS
Auszug aus der chinesischen Version der CSS2.1-Spezifikation
In CSS werden benachbarte Ränder von zwei oder mehr Boxen (vielleicht, aber nicht unbedingt Brüder) zu einem A-Rand kombiniert . Die Kombination der Ränder auf diese Weise wird als Kollaps
bezeichnet, und der resultierende kombinierte Rand wird als überlappender Rand bezeichnet.
Auszug aus der chinesischen Version der CSS2.1-Spezifikation
Wenn zwei oder mehr Ränder zusammengeführt werden, ist die resultierende Randbreite die kombinierte Randbreite . der Maximalwert. Bei negativen Rändern subtrahieren Sie den maximalen Absolutwert der negativen angrenzenden Ränder vom Maximalwert der positiven angrenzenden Ränder. Wenn kein positiver Rand vorhanden ist, subtrahieren Sie den maximalen Absolutwert der angrenzenden Ränder von 0
Auszug aus der chinesischen Version der CSS2.1-Spezifikation
Zwei Ränder grenzen an genau dann, wenn:
beide zu In-Stream-Boxen auf Blockebene gehören und sich im selben Blockformatierungskontext befinden.
Keine Linienkästen, keine Lücken, keine Polsterung und keine Ränder, um sie zu trennen (beachten Sie, daher einige Linienkästen mit einer Höhe von 0)
alles gehören zu vertikal benachbarten Boxkanten (vertikal benachbarten Boxkanten), also aus einem der folgenden Paare:
1 Der obere Rand einer Box und der obere Rand ihres ersten einfließenden untergeordneten Elements
2. Der untere Rand einer Box und der obere Rand des nächsten einfließenden Geschwisters
3. Der untere Rand des letzten einfließenden untergeordneten Elements und seines übergeordneten Elements. Der untere Rand, wenn der berechnete Wert der Höhe des übergeordneten Elements entspricht ist 'auto'
4. Der obere und untere Rand einer Box, die Box stellt keinen neuen Blockformatierungskontext her und der berechnete Wert von min-height ist 0, der berechnete Wert von height ist 0 oder 'auto' , und es gibt keine einfließenden untergeordneten Elemente
Wenn ein Teil eines Rands an einen anderen Rand angrenzt, wird er als an diesen Rand angrenzend betrachtet, ja, kollabierter Rand.
Was ist ein In-Stream-Element? Wenn ein Element schwebend, absolut positioniert oder das Wurzelelement ist, handelt es sich um ein Out-of-Flow-Element. Wenn ein Element nicht außerhalb des Flusses liegt, wird es als Zuflusselement bezeichnet.
In-Stream-Box auf Blockebene ist eine Box, die von In-Stream-Elementen auf Blockebene generiert wird.
Schlussfolgerung 1: Der Boxrand des Wurzelelements überlappt sich nicht (Grund: Obwohl das Wurzelelement eine Box auf Blockebene ist, ist es kein Inflow-Element).
Geben Sie mir ein Beispiel
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Bild- und Textcodes für nicht überlappende Ränder in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!