Detaillierte Erläuterung des Bild- und Textcodes für nicht überlappende Ränder in CSS

Randüberlappung

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.

Berechnungsregeln für Randüberlappung

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

Was ist der angrenzende Rand?

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.

Detaillierte Analyse jeder Bedingung

1 Sie gehören alle zu In-Stream-Boxen auf Blockebene und befinden sich im selben Blockformatierungskontext.

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!