Detaillierte Erklärung zum CSS-Randkollaps

Vorherige

Das ist eine klassische alte Frage. Da ein Leser sie schon einmal gestellt hat, werde ich sie für Sie klären.

Beginnen wir mit einem einfachen Beispiel

Schauen wir uns ein einfaches Beispiel an:

<Stil>
    .slide1 div {
      Rand: 10px 0;
    }
  </Stil>
 <div Klasse="Folie1">
    <h3>Randkollaps Typ 1: Geschwisterelemente</h3>
    <p>Textabstand 10px oben und unten</p>
    <p>Textabstand 10px oben und unten</p>
  </div> 

Sehen Sie sich die beiden p Tags in diesem Beispiel an. Gemäß der Stildefinition beträgt margin-bottom des ersten p und margin-top des zweiten p beide 10px, sodass der tatsächliche Abstand 20px betragen sollte. Wenn Sie dies jedoch mit dem Browser überprüfen, können Sie feststellen, dass der endgültige Rand 10px beträgt. Ein Beispiel hierfür ist das Zusammenklappen von Rändern: Die oberen und unteren Ränder eines Blockelements werden manchmal zu einem einzigen Rand kombiniert (oder zusammengeklappt).

Einstufung

Es gibt drei grundlegende Fälle von Margeneinbrüchen:

1. Angrenzende Elemente
2. Das übergeordnete Element und das erste untergeordnete Element (oder das letzte untergeordnete Element; denken Sie später daran, warum es das erste oder letzte untergeordnete Element ist)
3. Leere Elemente auf Blockebene

Beeilen Sie sich nicht, es auswendig zu lernen. Zunächst einmal ist das Beispiel im vorherigen Artikel der erste Fall – der Randkollaps tritt zwischen zwei benachbarten Elementen auf.

Der zweite und dritte Fall sind wie folgt:

<Stil>
    .Vater {
      Hintergrundfarbe: grün;

    }
    .Kind {
      Rand oben: 50px;
      Hintergrundfarbe: rot;
      Höhe: 300px;
    }
    
      .Folie3 {
      Rand: 10px 0;
    }
  </Stil>
  <h3>Zweiter Randeinbruch: übergeordnetes Element und erstes untergeordnetes Element</h3>
  <div class="slide2 Vater">
    <!-- Übergeordnetes Element ist grün -->
    <div Klasse="Folie2 Kind">
      <!-- Kindelemente sind rot -->
    </div>
  </div>
  <h3>Dritter Rand zusammenklappen: leere Block-Level-Elemente</h3>
  <div Klasse="Folie3"></div>

Ihre Bilder werden auch unten angezeigt:

Fall 2: Die Ränder des Kindelements werden außerhalb des Elternelements „verlagert“

Fall 3: Die oberen und unteren Ränder des Elements werden zusammenfallen

Okay, schauen wir uns jetzt die Gemeinsamkeiten dieser Situationen an (es wird empfohlen, ihre Boxmodelle zu zeichnen, aber ich bin zu faul, sie zu zeichnen-_-), und wir können die gemeinsame Ursache für den Randkollaps finden: Die Ränder berühren sich direkt und ohne Hindernisse.

Wie ist direkter Kontakt zu verstehen? Es ist ganz einfach:

• Im ersten Beispiel berühren sich die vertikalen margin der beiden <p> -Tags direkt;
• Da im zweiten Beispiel padding und border des übergeordneten Elements beide 0 sind, stehen auch margin und seine untergeordneten Elemente in direktem Kontakt. (Dieses Beispiel lässt sich leicht verstehen, wenn man das Kastenmodell zeichnet.)
• Im dritten Beispiel berühren sich auch die oberen und unteren Ränder des leeren Elements direkt ( padding und border sind ebenfalls 0).

Die Ergebnisse des Faltens in verschiedenen Fällen

Wie der Rand nach dem Falten berechnet wird, lässt sich ganz einfach überprüfen:

• Wenn beide Ränder positiv sind, wird nach dem Falten der größere Rand verwendet.
• Wenn ein Rand positiv und der andere negativ ist, ist der gefaltete Rand die Summe der Ränder.
• Wenn beide Ränder negativ sind, ist der reduzierte Rand die Summe der kleineren Ränder.

So verhindern Sie, dass die Ränder einbrechen

Wie oben erwähnt, liegt der Grund für den Randkollaps darin, dass die Ränder in direktem Kontakt stehen. Daher besteht die Möglichkeit, den Kollaps zu verhindern darin, diesen direkten Kontakt zu blockieren. Die Kombination der Methoden umfasst:

• Im verschachtelten Fall, solange border padding nicht 0 ist oder ein inline Element zum Trennen vorhanden ist, z. B. das Hinzufügen einer Textzeile im übergeordneten Element (Sie können es in Fall 2 direkt versuchen).
• Jede Methode zum Bilden einer Barriere mithilfe von BFC, z. B. Schweben, display:table usw. (Studenten, die mit BFC nicht vertraut sind, sollten dies zuerst überprüfen, ich werde es später ergänzen.)

Zusammenfassung

Ich muss hinzufügen, dass es sich bei dem, was wir oben besprochen haben, um grundlegende Situationen handelt. In grundlegenden Situationen können auch Kombinationen vorgenommen werden, z. B. zwischen mehreren benachbarten Elementen, Verschachtelung mehrerer Ebenen von untergeordneten Elementen usw. Sobald Sie die Grundprinzipien verstanden haben, sind andere Situationen leicht zu verstehen, solange Sie zur Überprüfung eine kleine Demo schreiben. Dann gibt es noch die Konventionen: Wenn der Inhalt Fehler enthält, weisen Sie bitte darauf hin (es ist völlig in Ordnung, wenn Sie sich beim Lesen unwohl fühlen und sich beschweren möchten);

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Ursprüngliche Adresse: https://segmentfault.com/a/1190000016842993