Definition und Berechnungsregeln der Margenüberschneidung

Randüberlappung

Auszug aus der chinesischen Version der CSS2.1-Spezifikation

In CSS werden die benachbarten Ränder von zwei oder mehr Boxen (können, aber nicht unbedingt Brüder) sein werden zu einem Rand zusammengefasst. 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überlappungen

Aus der chinesischen Version der CSS2.1-Spezifikation extrahiert

Wenn zwei oder mehr Ränder zusammengeführt werden, wird der generierte Rand erzeugt width ist der Maximalwert der kombinierten Randbreiten. 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 sind genau dann benachbart, 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), d 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 Randes an einen anderen Rand angrenzt, wird davon ausgegangen, dass er mit diesem Rand zusammenhängt. Der Nachbar ist ein zusammengebrochener 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).

Das obige ist der detaillierte Inhalt vonDefinition und Berechnungsregeln der Margenüberschneidung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!