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
18 Web-Usability-Prinzipien, die Sie kennen müssen
Sie können über die besten visuellen Designfähigk...
Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)
Laden Sie zunächst das Installationspaket von der...
Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli
vue-cli verwendet stimulsoft.reports.js (Tutorial...
Detaillierte Erklärung des CSS3-Rotationswürfelproblems
3D-Koordinatenkonzept Wenn sich ein Element dreht...
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
JavaScript-Makrotasks und Mikrotasks
Makrotasks und Mikrotasks JavaScript ist eine Sin...
Einführung in Netzwerktreiber für Linux-Geräte
Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...
Verbessern Sie die Effizienz der Seitencodeänderung und beherrschen Sie die Kernkenntnisse der HTML-Sprache
Beim Erstellen einer Website scheint die HTML-Spra...
Ein Beispiel für das elegante Schreiben von Statusbeschriftungen im Vue-Hintergrund
Inhaltsverzeichnis Vorwort Optimierung Variablen ...
Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung
Es gibt viele Möglichkeiten, Formularfelder in Vu...
Einfache Tipps zur Erhöhung der Ladegeschwindigkeit von Webseiten
Die Ladegeschwindigkeit einer Webseite ist ein wic...
CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke
Manchmal benötigen unsere Seiten Eingabeaufforder...
Allgemeine Struktur-Tags in XHTML
Struktur Text, Kopf, HTML, Titel Text abbr, Akron...
Analyse des Prinzips und der Verwendung von MySQL-Benutzerdefinierten Funktionen
Dieser Artikel veranschaulicht anhand von Beispie...
Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript
*Seite erstellen: zwei Eingabefelder und ein Butt...