div Außenrandüberlappungsproblem und Lösung

In diesem Artikel erfahren Sie, wie Sie die damit verbundenen Probleme überlappender Div-Ränder lösen können. Die Überlappung der Ränder erfolgt nur zwischen den oberen und unteren Rändern normaler Flussdokumente , während Inline-Elemente und Inline-Blockelemente keine überlappenden Ränder haben. Ich hoffe, dass es für alle hilfreich ist. 🔜 -bottom verschmilzt (kollabiert) manchmal zu einem einzelnen Rand, dessen Größe dem Maximum des einzelnen Rands entspricht (oder nur einem von beiden, wenn sie gleich sind), ein Verhalten, das als Randkollaps bezeichnet wird. Randüberlappung bedeutet, dass sich die angrenzenden Ränder (ohne nicht leeren Inhalt, Auffüllung oder Ränder dazwischen) von zwei oder mehr Boxen (die benachbart oder verschachtelt sein können) überlappen, um einen einzigen Rand zu bilden.

Mit anderen Worten, Randüberlappung bezieht sich auf zwei vertikal benachbarte Elemente auf Blockebene. Wenn sich der obere und untere Rand treffen, überlappen sich die äußeren Ränder und die überlappenden Ränder sind gleich dem größeren von ihnen.

Methode zur Berechnung der Überlappung des Margin-Werts:

Margin-Werte sind beide positiv, nehmen Sie den Maximalwert der beiden.

Wenn eine negative Grenze erscheint, subtrahieren Sie die negative Grenze mit dem größten Absolutwert von der größten positiven Grenze.

Wenn keine positive Grenze vorhanden ist, wird die negative Grenze mit dem größten Absolutwert von Null subtrahiert.

1. Bei welchen Elementen treten Randüberlappungsprobleme auf?

überlappende Ränder

von
• normalen Flussdokumenten

  . Nur

  Blockelemente
haben überlappende Ränder
• und

  Inline-Blockelemente

  haben keine Randüberlappungsprobleme

• Zweitens, unter welchen Umständen kommt es zu Randüberlappungen?

Die erste Situation:

Marin benachbarter Geschwisterelemente – Die Werte von Überlappung unten und Rand oben

Wenn sich der Rand überlappt, wird nur der maximale Randbereich ausgewählt und übrig, sodass der Rand zwischen den beiden 100 Pixel beträgt Wenn Sie dieses Problem der Randüberlappung lösen müssen, müssen Sie es tun Später Float zu einem Element hinzufügen oder ein Div auf einen seiner Brüder setzen, Rand festlegen: 1px einfarbig weiß; Der Effekt des Beispiels ist wie folgt: Wenn der obere Rand sowohl des übergeordneten Elements als auch des untergeordneten Elements auf 50 Pixel eingestellt ist, sind das übergeordnete Element und das untergeordnete Element beide 50 Pixel vom Rand entfernt, anstatt 50px Abstand zwischen dem untergeordneten Element und dem übergeordneten Element, wie wir denken.

Wenn das übergeordnete Element keinen oberen Rand festlegt und das untergeordnete Element den oberen Rand auf 50 Pixel festlegt, sind die übergeordneten und untergeordneten Elemente zu diesem Zeitpunkt immer noch 50 Pixel vom oberen Rand entfernt. Lösung:

Methode 1: Hinzufügen Überlauf: für das übergeordnete Element ausgeblendet;

Diese Methode löst unser Randüberlappungsproblem, aber diese Methode gilt nur für "Die Höhe des untergeordneten Elements plus die Randhöhe ist kleiner als die Höhe des übergeordneten Elements (childHeight +margin -top, andernfalls wird der Inhalt des untergeordneten Elements ausgeblendet

Methode 2: Fügen Sie dem übergeordneten Element einen Rahmen hinzu (Sie können einen transparenten Rahmen hinzufügen)

Methode 3: Anzeige festlegen: inline -block;Da nur Blockelemente überlappende Ränder haben, machen wir daraus kein Blockelement und setzen es auf ein Inline-Blockelement

Methode 4: Float auf das übergeordnete oder untergeordnete Element setzen

Methode 5 : Float auf das übergeordnete oder untergeordnete Element setzen Position der untergeordneten Einstellung: absolut;

Methode 6: Polsterung

<div id="box1"></div>
<div id="box2"></div>
 
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-bottom: 50px;
     margin-top: 50px;
 }
 #box2{
     width: 200px;
     height: 200px;
     background: lightcoral;
     margin-top:100px ;
     opacity: 0.3;
     float: left;   //加上float后，两者间距为150px
 }</span></p>
<p id="u141a6ac1"> zum übergeordneten Element hinzufügen Der dritte Fall: Das leere Element auf Blockebene <strong></strong></p>
<p id="u6177c6bc"> eigener Rand- oben und Rand-unten treten überlappend auf. Wir können dieses Problem lösen, indem wir einen Rand, einen Abstand oder eine Höhe dafür festlegen. <em><pre class="brush:php;toolbar:false"><div id="box1">
   <div id="box3"></div>
</div>
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
 }
 #box3 {
   width: 100px;
   height: 100px;
   background-color: #f12416;
   margin-top: 50px;
 }

Nach dem Hinzufügen eines Rahmens oder einer Polsterung beträgt der Abstand zwischen dem oberen und dem unteren Element 50 Pixel bzw. 100 Pixel. Vor dem Hinzufügen betrug der Abstand zwischen dem oberen und dem unteren Element 100 Pixel. Der vierte Fall: die Höhe des übergeordneten Elements von auto Der Rand unten überlappt den Rand unten des untergeordneten Elements

Das übergeordnete Element legt border-bottom und padding-bottom fest, um sie zu trennen, oder es kann sein

Legen Sie eine Höhe für das übergeordnete Element fest. Maximale und minimale Höhe können dieses Problem ebenfalls lösen.

3 So berechnen Sie die Randüberlappung: Wenn alle Werte positiv sind, nehmen Sie den größten Wenn es sich nicht alle um positive Werte handelt, nehmen Sie den Absolutwert und subtrahieren Sie dann den Maximalwert vom positiven Wert.

• Wenn es keinen positiven Wert gibt, nehmen Sie den Absolutwert und subtrahieren Sie dann den Maximalwert von 0.

• (Teilen von Lernvideos:

  CSS-Video-Tutorial
,
• HTML-Video-Tutorial

  )

Das obige ist der detaillierte Inhalt vondiv Außenrandüberlappungsproblem und Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!