Diese Frage ist ähnlich wie diese (mit einer ausgezeichneten Antwort), obwohl meine nicht dazu gehört Float-Probleme.
Ich habe kürzlich Probleme bekommen, als ich versuchte, einen Rand auf ein Nur-Kind eines Block-Level-Elements anzuwenden:
Obwohl der Rand angewendet wird, ist der Hintergrund des Elternteils nicht gültig. Dies bleibt der Fall, es sei denn, Geschwister werden vor und nach dem #child oder (interessanterweise meiner Meinung nach) einem overflow eines anderen Wertes als visible hinzugefügt. Hier ist das gleiche Beispiel, aber mit einem Überlaufwert:
Von CSS2.1 Abschnitt 9.4.1 - Blockformatierungskontexte fand ich Folgendes:
Floats, absolut positionierte Elemente, Blockcontainer (z. B. Inline-Blöcke, Tabellenzellen und Tabellenbeschriftungen), die keine Blockfelder sind, und Blockfelder mit "Überlauf", außer "sichtbar" (außer bei diesem Wert wurde in das Ansichtsfenster propagiert), um neue Blockformatierungskontexte für ihren Inhalt zu erstellen.
Ich habe wirklich Mühe, die Logik zu verstehen, die hinter der Logik des "Überflusses anders als des Sichtbaren" steht. Die Ränder werden in dieser Situation scheinbar nicht abgeschnitten, da nur der Hintergrund geändert werden muss. Könnte jemand demonstrieren, warum ein Wert von overflow: visible eine solche Situation verursacht?
Wie ich in meiner Antwort auf die Frage, zu der Sie verlinken, erwähnt haben, liegt der Hauptgrund für overflow -Werte außer visible in einem neuen Blockformatierungskontext aufgrund von Implementierungseinschränkungen in Bezug auf Gleitkommazahlen, obwohl das Konzept von Überlauf scheint nicht sofort eine Beziehung mit Schwimmern zu haben.
Während die Beziehung zwischen Fließkommazahlen und reduzierenden Margen ziemlich einfach ist (es nie vorkommt), ist die Tatsache, dass Ränder nicht durch die Grenzen eines Elements mit einem solchen Wert für overflow zusammenfallen können, gering mehr als ein Nebeneffekt dieser Änderung, da die Ränder so definiert sind, dass sie nicht durch eine Box zusammenfallen, die einen Blockformatierungskontext erstellt, wie in Abschnitt 8.3.1 . Ich zitiere:
- Ränder von Elementen, die neue Blockformatierungskontexte erstellen (z. B. Gleitkommazahlen und Elemente mit "Überlauf", mit Ausnahme von "sichtbar"), werden nicht mit ihren untergeordneten Elementen untergeordnet.
Dies beinhaltet sowohl Floats als auch Elemente mit einem solchen Wert für overflow . Der Überlauf selbst hat keinen direkten Einfluss auf die Ränder.
Wenn sowohl das übergeordnete Element als auch das untergeordnete Element Elemente auf Blockebene sind, die an demselben Blockformatierungskontext teilnehmen, werden sie standardmäßig minimiert, sofern nicht etwas im Weg ist:
Der obere Rand eines In-Flow-Blockelements wird mit dem ersten In-Flow-Block-Level-Child-Top-Rand kollabiert, wenn das Element keinen oberen Rand und keine obere Füllung hat und das Kind keine Clearance hat.
Der untere Rand einer In-Flow-Block-Box mit einer 'Höhe' von 'auto' und einer 'min-height' von Null bricht mit dem letzten untergeordneten Flow-Block-Level-Kind-Unterrand zusammen, wenn das Feld hat keinen unteren Rand und keinen unteren Rand und der untere Rand des Kindes kollabiert nicht mit einem oberen Rand, der Abstand hat.
Dies erklärt, warum der Hintergrund des Elternteils nicht erweitert wird, bis Sie versuchen, den Randzusammenbruch zu blockieren.
In Ihren ersten Beispielen sind die oberen und unteren Ränder von Eltern und Kind zusammengebrochen. Grob gesagt, der 30px-Spielraum von Kind wird mit der Nullgrenze von Eltern kombiniert, der größere Spielraum von den zwei wird auf den Eltern angewendet. Zitat :
In CSS, die angrenzenden Ränder von zwei oder mehr Boxen (die möglicherweise oder möglicherweise keine Geschwister) können sich zu einer einzigen Marge kombinieren. Ränder Diese Kombination soll auf diese Weise zusammenbrechen, und das Ergebnis wird kombiniert Rand wird als minimierter Rand bezeichnet.
Im selben Dokument wird der Effekt des Überlaufs (wie in Ihrem zweiten Beispiel) erklärt:
Ränder von Elementen, die neue Blockformatierungskontexte (z als Floats und Elemente mit 'overflow' anders als 'visible') nicht kollabieren mit ihren In-Flow-Kindern.
Dies verdeutlicht ein Problem, das ich gelegentlich mit Höhen hatte. Es sieht so aus, als würde die Höhe des Elternelements nicht von den Rändern des untergeordneten Elements berechnet.
Justier deine Geige: Ссылка
%Vor%Die Ränder werden auf das Kind angewendet, aber die Höhe des Elternteils wurde nicht beeinflusst. Wenn Sie einen Überlauf oder Rand hinzufügen, wird die Höhe angepasst. Ich kämpfe manchmal mit, warum Elternelemente nicht immer erweitern, um die Kinder zu enthalten.
Es scheint sehr seltsam, aber ...
Es könnte kompliziert sein, widersprüchliche Regeln für die Elternhöhe zu haben. Es würde sich auf viele Browser-Layouts auswirken, z. B. auf die relative Position der übergeordneten Position mit untergeordneten Objekten, auf absolute Werte oder auf automatische und versteckte Überläufe und wahrscheinlich auf eine Vielzahl anderer Layout-Algorithmen. Ich könnte mir vorstellen, dass dies die Layout-Engine des Browsers unnötig verkomplizieren würde, genauso wie die Spezifität des CSS-Selektors für uns manchmal ein großer Schmerz sein kann.
Sie würden Padding zum übergeordneten Element hinzufügen, um dessen Höhe anzupassen, was intuitiver ist (oder?).
Tags und Links css