Wie erstelle ich einen Formatierungskontext auf Blockebene? Die Rolle des Formatierungskontexts auf Blockebene

Was ist der Formatierungskontext auf Blockebene in CSS? Der Blockformatierungskontext ist Teil der visuellen Darstellung von CSS auf Webseiten und wird verwendet, um das Layout von Blockboxen zu bestimmen. Im Positionierungsschema gehört es zum normalen Fluss. Wie erstellt man also einen Formatierungskontext auf Blockebene? Was sind die Voraussetzungen, um eine Formatierung auf Blockebene zu erstellen? In diesem Artikel wird es Ihnen einzeln erklärt.

FC (Formatierungskontext) bedeutet Formatierungskontext/Formatierungsbereich, der sich auf einen Bereich im Seitenlayout bezieht. Er verfügt über eigene Rendering-Regeln und bestimmt, wie seine eigenen Unterelemente angeordnet sind. und seine Beziehung und Rolle mit anderen Elementen.

Gemäß der CSS-Anzeigeklassifizierung werden XHTML-Elemente in drei Typen unterteilt: Blockelemente, Inline-Elemente und variable Elemente. Beim Hinzufügen von Stilen zu Seitenelementen müssen wir wissen, um welchen Typ es sich bei dem Element handelt. Anschließend können wir den Elementtyp selbst konvertieren. Genauso wie wir display verwenden können, um ein Inline-Element in ein Blockelement umzuwandeln (display: block). Es gibt mehrere spezielle Elemente img und die Eingabe erfolgt standardmäßig im Inline-Block.

Was ist ein Blockformatierungskontext (BFC)? Entspricht einem Sondergebiet.

Wenn ein Element die Bedingungen erfüllt, um ein BFC zu werden, wird das Element zu einem isolierten unabhängigen Container. Die internen Elemente des Elements werden vertikal entlang der Grenze seines übergeordneten Elements angeordnet und haben keine Auswirkungen die äußeren Elemente des anderen.

Die Bedingungen zum Auslösen von BFC sind wie folgt:

1. Gleitende Elemente, andere Gleitkommawerte als keine

2 , Position (absolut, fest)

3. Anzeige ist einer der folgenden Werte: inline-blocks, table-cells, table-captions. //Es handelt sich um einen Blockcontainer, der keine Box auf Blockebene ist

4. Andere Überlaufwerte als sichtbar (versteckt, automatisch, scrollen)

Wenn eine der oben genannten vier Bedingungen vorliegt Wenn dies erfüllt ist, kann ein Formatierungskontext auf Blockebene erstellt werden. Die Umgebung, in der sich der Inhalt befindet, ist die Umgebung des Formatierungskontexts auf Blockebene.

In CSS3 heißt BFC Flow Root und einige Triggerbedingungen werden hinzugefügt:

1 Der Tabellentitelwert der Anzeige

2 Der feste Wert der Position ist eigentlich eine Unterklasse des absoluten Werts, sodass die Verwendung dieses Werts in CSS2.1 auch BFC auslöst, dies wird jedoch in CSS3 klarer gemacht. Das

-Element setzt das IE-spezifische CSS-Attribut „zoom: 1“, um „hasLayout“ auszulösen. Es wird verwendet, um das Zoomverhältnis des Elements festzulegen oder abzurufen Verwenden von Zoom: 1 beides Es kann hasLayout auslösen, ohne andere Auswirkungen auf die Elemente zu haben, was relativ praktischer ist. Dies ist die Situation unter IE

Die Rolle des Block-Level-Formatierungskontexts (BFC):

(1) BFC verhindert, dass Ränder entstehen Zusammenklappen

Ich verstehe, dass das Zusammenfalten bedeutet, dass sich die äußeren Ränder überlappen und nicht klar unterschieden werden. Es ist, als ob das, was dir gehört, mir gehört und was mir gehört.

Regeln für die Randreduzierung: Nur wenn zwei Elemente auf Blockebene benachbart sind und sich im gleichen Formatierungskontext auf Blockebene befinden, überlappen sich die vertikalen Ränder zwischen ihnen. Das heißt, selbst wenn zwei Elemente auf Blockebene benachbart sind, werden ihre Ränder nicht reduziert, wenn sie sich nicht im selben Formatierungskontext auf Blockebene befinden. Daher führt die Verhinderung des Zusammenbruchs der Margen lediglich zu einem neuen BFC.

Aber für zwei benachbarte Elemente bedeutet es nicht viel, ihnen eine Shell hinzuzufügen, aber für verschachtelte Elemente ist es notwendig, das übergeordnete Element auf BFC zu setzen. Auf diese Weise wird der Rand des untergeordneten Elements nicht mit dem Rand des übergeordneten Elements zusammenfallen.

(2) BFC kann schwebende Elemente enthalten

Dies zeigt, dass das Unterelement in BFC seinen enthaltenden Block nicht überschreiten wird, während das Element mit absoluter Position darüber hinausgehen kann it. Der umschließende Blockrand

(3) BFC kann verhindern, dass Elemente durch schwebende Elemente abgedeckt werden

Dies basiert auf der linken Seite des Randfelds jedes einzelnen Element und das umgebende Blockrahmenfeld berühren die linke Seite von (für die Formatierung von links nach rechts, andernfalls umgekehrt). Dies gilt auch dann, wenn Float vorhanden ist. Dieses Prinzip ist verwirklicht.

Empfohlene verwandte Artikel:

CSS > Übersetzung: Grundlegendes zum Formatierungskontext auf Blockebene in CSS_html/css_WEB-ITnose

CSS versteht Blockformatierungskontext BFC

Detaillierte Erläuterung der Funktionsprinzipien von Blockformatierungskontext (Blockformatierungskontext), Floating und absoluter Positionierung_html/css_WEB- ITnose

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Formatierungskontext auf Blockebene? Die Rolle des Formatierungskontexts auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!