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
Artikel empfehlen
Vue realisiert die Palastgitterrotationslotterie
Vue implementiert die Palastgitterrotationslotter...
Reines CSS, um die Textsymbolfunktion zu erreichen, indem das erste Zeichen der Zeichenfolge verwendet wird
So implementieren Sie Textsymbole über CSS /*Symb...
Detaillierte Erläuterung von Beispielen für MySQL-Einzeltabellenabfragevorgänge [Syntax, Einschränkungen, Gruppierung, Aggregation, Filterung, Sortierung usw.]
Dieser Artikel beschreibt die MySQL-Einzeltabelle...
Vue + Canvas realisiert den Effekt der Aktualisierung des Wasserfalldiagramms von oben nach unten in Echtzeit (ähnlich wie QT).
Ohne weitere Umschweife hier ein Demobild. Die im...
So installieren Sie OpenSSH aus dem Quellcode in CentOS 7
Umgebung: Mindestinstallation von CentOS 7.1.1503...
Beispielcode zum Vergleich verschiedener Syntaxformate von vue3
Die Standardvorlagenmethode ähnelt vue2 und verwe...
JavaScript-Entwurfsmuster, Befehlsmuster
Das Befehlsmuster ist ein Verhaltensentwurfsmuste...
Lösen Sie das Problem, dass die CentOS-Zeit der virtuellen VMWare-Maschine nicht mit der Ortszeit übereinstimmt
Die Zeit der virtuellen VM Ware-Maschine CentOS s...
Eine kurze Diskussion über die Kodierung von HTML-Sonderzeichen in CSS3-Inhalten: „Ich bin ein Sonderzeichen“
Einige im Projekt verwendete Sonderzeichen und Sy...
Detaillierte Erläuterung der Zeichenreihenfolge von MySQL Order by in (empfohlen)
//MySQL-Anweisung SELECT * FROM `MyTable` WHERE `...
Detailliertes Tutorial zur Installation und Bereitstellung von Nginx Linux
1. Einführung in Nginx Nginx ist ein Webserver, d...
Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen
Inhaltsverzeichnis Datenverarbeitungslösung auf M...
Detaillierte Erklärung der Set-Datenstruktur von JavaScript
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
Docker erstellt die Codeerkennungsplattform SonarQube und erkennt den Prozess von Maven-Projekten
1 Einleitung Ein guter Programmierer sollte über ...
Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3
Inhaltsverzeichnis Funktionale Komponenten So sch...