So lösen Sie das Problem der Randüberlappung

1. Zunächst müssen Sie wissen, was den vertikalen Randkollaps von zwei oder mehr benachbarten normalen Flussblockelementen auslöst

1. Zwei oder mehr bedeutet, dass die Menge größer als eins sein muss, und zeigt auch an, dass das Falten die Interaktion zwischen Elementen ist. Es gibt kein solches Phänomen, dass A und B gefaltet werden, aber B faltet nicht mit A.

2. Angrenzend bedeutet, dass sie nicht durch nicht leeren Inhalt, Polsterung, Rahmen oder Freiraum getrennt sind, was ihre Positionsbeziehung anzeigt.
Beachten Sie, dass, wenn keine Trennung erfolgt, der obere Rand eines Elements im normalen Fluss (nicht schwebende Elemente usw.) an den oberen Rand seines ersten untergeordneten Elements angrenzt. Nur wenn die Höhe eines Elements „auto“ ist, grenzt sein unterer Rand im normalen Fluss (nicht schwebende Elemente usw.) an den unteren Rand seines letzten untergeordneten Elements.

3. Die vertikale Richtung bezieht sich auf die spezifische Richtung. Nur der vertikale Rand wird gefaltet. Mit anderen Worten, der horizontale Rand wird nicht gefaltet.

2. Wie kann also verhindert werden, dass die oberen und unteren Ränder von Elementen zusammenfallen?

1. Die Ränder schwebender Elemente, Inline-Blockelemente und absolut positionierter Elemente fallen in vertikaler Richtung nicht mit den Rändern anderer Elemente zusammen (beachten Sie, dass sich dies auf darüber und darunter angrenzende Elemente bezieht).

2. Das Element, das den Formatierungskontext auf Blockebene erstellt, reduziert die Ränder nicht mit seinen untergeordneten Elementen (beachten Sie, dass dies bedeutet, dass das Element, das den BFC erstellt, und seine untergeordneten Elemente nicht reduziert werden).

Wir alle wissen, dass die Faktoren, die BFC auslösen, Float (außer keine), Überlauf (außer sichtbar), Anzeige (Tabellenzelle/Tabellenüberschrift/Inline-Block), Position (außer statisch/relativ) sind.

Offensichtlich können Sie sehen, dass die Faktoren, die das Zusammenfallen benachbarter Elemente verhindern, eine Teilmenge der Faktoren sind, die BFC auslösen. Das heißt, wenn ich overflow:hidden für die oberen und unteren benachbarten Elemente einstelle, werden die oberen und unteren Ränder der oberen und unteren Elemente trotzdem zusammenfallen, obwohl BFC ausgelöst wird.

Dieses Problem hat eigentlich nichts mit BFC zu tun. Ich hoffe, dass niemand BFC missbraucht. Sie sollten wissen, dass BFC nicht allmächtig ist. Die ursprüngliche Absicht bei der Erstellung von BFC besteht nur darin, dem Element selbst (einschließlich seiner untergeordneten Elemente) zu ermöglichen, seine Breite und Höhe korrekt zu berechnen. http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

Die auslösenden Faktoren für kein Falten sind schwebende Elemente, Inline-Block-Elemente und absolut positionierte Elemente. Dies ist nur eine Teilmenge der Faktoren für die Erstellung von BFC, aber es bedeutet nicht, dass die Elemente, die BFC erstellen, nicht gefaltet werden, da BFC auch mit overflow:hidden erstellt werden kann. Wenn im Gegenteil das übergeordnete Element den BFC auslöst, werden stattdessen seine untergeordneten Elemente auf Blockebene reduziert.

Hier habe ich eine DEMO geschrieben, um dieses Problem zu veranschaulichen: http://whycss.com/demo/collspan_demo.html Die drei Situationen zum Erstellen von BFC werden erwähnt. Das Ergebnis ist, dass die oberen und unteren Ränder der untergeordneten Elemente zusammenbrechen.

Das letzte von Kejun erwähnte Attribut ist Zoom. Dies ist das Zoom-Attribut, das ursprünglich vom IE-Browser unterstützt wurde. Jetzt wird es nur noch von den neuesten Browsern mit WebKit-Kern unterstützt. Allerdings kann hasLayout nur in Browsern unter IE8 erfolgreich ausgelöst werden und hat keine Auswirkungen auf Nicht-IE-Browser. Sie müssen daher weiterhin auf die gleiche Weise einen BFC erstellen. Eine Einführung in hasLayout und BFC finden Sie in meinem Blog-Artikel http://www.smallni.com/?p=174

Zur Lösung dieses Problems schlage ich vor, beim Schreiben Ränder in die gleiche Richtung zu verwenden, sie also z. B. oben oder unten festzulegen, da Sie in der Praxis manchmal nicht für jedes Element Float, Inline-Block oder Absolute festlegen müssen.

<<: Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System

>>: Html+CSS-Zeichnungsdreiecksymbol

Synology NAS verwendet Docker-Container zum Erstellen eines KMS-Aktivierungsservers zum Aktivieren des Windows-Systems und von Office (Bedienungsschritte)

Artikel

Beispiel und Lösung für einen SQL-Injection-Sicherheitslückenprozess

Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses

Inhaltsverzeichnis 1. Seitenlayout 2. Bild-Upload...

So lösen Sie das Problem der Randüberlappung

Synology NAS verwendet Docker-Container zum Erstellen eines KMS-Aktivierungsservers zum Aktivieren des Windows-Systems und von Office (Bedienungsschritte)

Beispiel und Lösung für einen SQL-Injection-Sicherheitslückenprozess

Einführung in die neuen Funktionen von ECMAscript

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

Vue führt eine Überprüfung durch, ob der Benutzername verfügbar ist

Testfragen und Referenzantworten zum Thema Webdesign und Produktion

Erfahren Sie mehr über MySQL-Indizes

js zur Implementierung eines Web-Rechners

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

Beispiele für allgemeine Operationen mit MySQL-Fremdschlüsseleinschränkungen [Anzeigen, Hinzufügen, Ändern, Löschen]

Artikel empfehlen

JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells

Beschreiben Sie kurz die MySQL InnoDB-Speicher-Engine

Beispielcode zur Implementierung einer Pivot-Tabelle in MySQL/MariaDB

Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses

Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Vollständige MySQL-Lernhinweise

js implementiert einen einfachen Countdown

Detaillierte Erklärung des MySQL-Datenbankparadigmas

Tutorial zur Ein-Klick-Installation von Docker und Docker-Compose (unterstützt online und offline)

Detaillierte Erläuterung der Nginx-Anti-Hotlink- und Anti-Crawler-Konfiguration

Implementierungsbeispiel für die Message Board-Funktion von Node.js+Express

So zeigen Sie historische Befehle in Linux an und führen sie aus

CSS-Code zur Steuerung der Hintergrundfarbe der Webseite

Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?

Detaillierte Erläuterung zur Verwendung von Docker zum schnellen Bereitstellen der ELK-Umgebung (neueste Version 5.5.1)