Was sind die Formatierungskontexttypen (FC) im CSS-Layout? Einführung in Formatierungskontexttypen (FC).

Was ist ein Formatierungskontext (FC)? Formatierungskontext (Formatierungskontext) bezieht sich auf einen Rendering-Bereich auf der Seite, der über eine Reihe von Rendering-Regeln verfügt, die die Positionierung seiner Unterelemente sowie deren Interaktion und Interaktion mit anderen Elementen bestimmen. Was sind also die Formatierungskontexte? im CSS-Layout? Der folgende Artikel stellt Ihnen verschiedene Arten von Formatierungskontexten vor.

Blockformat-Kontext (BFC):

Was ist BFC? Blockformatierungskontext, Formatierungskontext auf Blockebene, ist ein unabhängiger Rendering-Bereich auf Blockebene. Dieser Bereich verfügt über eine Reihe von Rendering-Regeln, um das Layout von Boxen auf Blockebene einzuschränken, und hat nichts mit der Außenseite des Bereichs zu tun.

BFC-Beschränkungsregeln

1 Die interne BOX wird nacheinander in vertikaler Richtung platziert; 2 . Der Abstand in vertikaler Richtung wird durch den Spielraum bestimmt. (Die vollständige Aussage lautet: Die Ränder zweier benachbarter BOXen, die zum selben BFC gehören, überlappen sich unabhängig von der Richtung.)

3. Der linke Rand jedes Elements stimmt mit der linken Grenze des enthaltenden Blocks überein . berührend (von links nach rechts), auch für schwebende Elemente. (Dies zeigt, dass die untergeordneten Elemente im BFC den enthaltenden Block nicht überschreiten und das Element mit der absoluten Position die Grenze seines enthaltenden Blocks überschreiten kann.

4 Der BFC-Bereich überlappt nicht mit dem Float-Element ;

5. Bei der Berechnung der Höhe von BFC sind auch schwebende untergeordnete Elemente an der Berechnung beteiligt.

6 der Behälter wird nicht beeinträchtigt und umgekehrt;

Anwendung von BFC

Überlappung verhindern

• margin

  Höhenkollaps durch Schweben verhindern
So generieren Sie den Wert von BFC

ist
• ; der Wert von

  floatnone

ist nicht
• ; 🎜> ist

  overflow visible;

• display hat einen Wert von inline-block oder table-celltable-caption

Anzeige: Tabelle denkt auch, dass es in Ordnung ist. BFC generieren? Tatsächlich generiert Table standardmäßig eine anonyme Tabellenzelle, und diese anonyme Tabellenzelle generiert BFC.

• positionabsoluteInline-Formatierungskontext (IFC): fixed

Was ist IFC? IFC (Inline Formatting Contexts) wird wörtlich als „Inline-Formatierungskontext“ übersetzt. Die Höhe des IFC-Zeilenrahmens (Drahtrahmen) wird aus der höchsten tatsächlichen Höhe der darin enthaltenen Inline-Elemente berechnet (nicht beeinflusst durch vertikale Auffüllung/Ränder)

Merkmale von IFC

1 Das Linienfeld in IFC haftet im Allgemeinen an der gesamten IFC von links nach rechts, wird jedoch durch Float gestört Elemente. Das Float-Element wird zwischen dem IFC und der Line-Box platziert, wodurch die Breite der Line-Box verkürzt wird.

2. Es ist unmöglich, Elemente auf Blockebene in IIFC einzufügen (z. B. beim Einfügen eines Div in p), werden zwei anonyme Blöcke getrennt vom Div generiert Das heißt, es werden zwei IFCs generiert. Jedes IFC erscheint als Blockebenenelement, vertikal mit dem Div angeordnet.

Anwendung von IFC

Horizontale Zentrierung: Wenn ein Block horizontal in der Umgebung zentriert werden soll, führt die Einstellung

dazu Der Block soll horizontal in der Umgebung zentriert werden. Die Ebene generiert

, die durch

horizontal zentriert werden kann.

Vertikal zentriert: Erstellen Sie ein
1. , verwenden Sie eines der Elemente, um die Höhe des übergeordneten Elements zu erweitern, und legen Sie dann dessen

   fest. Andere Inline-Elemente können vertikal sein unter diesem übergeordneten Element Zentriert. inline-blockIFCtext-align

2. Rasterlayoutformatierungskontext (GFC)

   IFCvertical-align:middle

Wörtlich übersetzt als „Rasterlayoutformatierungskontext“ Wenn der

-Wert für ein Element auf

gesetzt wird, erhält dieses Element einen unabhängigen Rendering-Bereich. Wir können die Rasterdefinitionslinie im Rastercontainer und die Rasterdefinitionsspalte definieren Eigenschaften definieren jeweils eine Rasterzeile für ein Rasterelement

und eine Rasterspalte

definiert die Position und den Abstand für jedes Rasterelement GFC(GridLayout Formatting Contexts). displaygrid（grid container） ändert den herkömmlichen Layoutmodus und ändert das Layout von einem eindimensionalen Layout in ein zweidimensionales Layout. Einfach ausgedrückt ist das Layout mit （grid definition rows） nicht mehr auf eine einzige Dimension beschränkt. Zu diesem Zeitpunkt ist es für Sie äußerst einfach, Layouteffekte wie ein Neun-Quadrat-Raster und ein Puzzle zu erzielen. （grid definition columns）（grid item）（grid row）（grid columns）Adaptiver Formatierungskontext (FFC): （grid item）

GFCFFC (Flex Formatting Contexts) bedeutet wörtlich übersetzt „Adaptiver Formatierungskontext“, zeigt Elemente mit einem an Der Wert von Flex oder Inline-Flex generiert einen Flex-Container. GFC

Flex Box besteht aus Flexbehältern und Flexartikeln. Sie können einen Flex-Container erhalten, indem Sie die Anzeigeeigenschaft des Elements auf „Flex“ oder „Inline-Flex“ setzen. Ein auf Flex gesetzter Container wird als Blockebenenelement gerendert, während ein auf Inline-Flex gesetzter Container als Inline-Element gerendert wird.

Jedes untergeordnete Element in einem Flex-Container ist ein Flex-Element. Es können beliebig viele Flex-Items vorhanden sein. Alle Elemente außerhalb des Flex-Containers und innerhalb des Flex-Projekts sind davon nicht betroffen. Einfach ausgedrückt definiert Flexbox, wie Flex-Elemente in einem Flex-Container angeordnet werden sollen.

Der Unterschied zwischen adaptivem Formatierungskontext (FFC) und Block-Level-Formatierungskontext (BFC):

FFC ähnelt BFC etwas, es gibt jedoch noch die folgenden Unterschiede:

1. Flexbox unterstützt die Pseudoelemente ::first-line und ::first-letter

2. Vertical-align hat keine Auswirkung auf untergeordnete Elemente in Flexbox

3. Die Attribute „float“ und „clear“ haben keine Auswirkung auf untergeordnete Elemente in Flexbox und führen auch nicht dazu, dass die untergeordneten Elemente aus dem Dokumentenfluss ausbrechen (aber sie haben Auswirkungen auf Flexbox!)

4. Mehrspaltiges Layout (Spalte- *) Es ist auch in Flexbox ungültig, was bedeutet, dass wir kein mehrspaltiges Layout verwenden können, um die untergeordneten Elemente in Flexbox darunter anzuordnen

5. Die untergeordneten Elemente unter Flexbox erben nicht die Breite von Der übergeordnete Container

Empfohlene verwandte Artikel:

CSS > >CSS > Verschiedene Höhenberechnungen im Inline-Formatierungskontext_html/css_WEB-ITnose

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

Das obige ist der detaillierte Inhalt vonWas sind die Formatierungskontexttypen (FC) im CSS-Layout? Einführung in Formatierungskontexttypen (FC).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!