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
margin
floatnone
overflow visible;
display hat einen Wert von inline-block oder table-celltable-caption
positionabsoluteInline-Formatierungskontext (IFC): fixed
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 Einstellungdazu Der Block soll horizontal in der Umgebung zentriert werden. Die Ebene generiert
, die durchhorizontal zentriert werden kann.
fest. Andere Inline-Elemente können vertikal sein unter diesem übergeordneten Element Zentriert. inline-blockIFCtext-align
IFCvertical-align:middle
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
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!
