Quels sont les types de contexte de formatage (FC) dans la mise en page CSS ?

Qu'est-ce que le contexte de formatage (FC) ? Le contexte de formatage (Contexte de formatage) fait référence à une zone de rendu dans la page, qui possède un ensemble de règles de rendu, qui déterminent la façon dont ses sous-éléments sont positionnés, ainsi que leur interaction et leur interaction avec d'autres éléments. Alors, quels sont les contextes de formatage. en mise en page CSS ? L'article suivant vous présente plusieurs types de contexte de formatage.

Contexte de format de bloc (BFC) :

Qu'est-ce que BFC ? Le contexte de formatage de bloc, contexte de formatage au niveau du bloc, est une zone de rendu indépendante au niveau du bloc. Cette zone possède un ensemble de règles de rendu pour contraindre la disposition des boîtes au niveau du bloc et n'a rien à voir avec l'extérieur de la zone.

Règles de contrainte BFC

1 Les BOX internes seront placées les unes après les autres dans le sens vertical

2. . La distance dans le sens vertical est déterminée par la marge. (L'énoncé complet est le suivant : les marges de deux BOX adjacentes appartenant au même BFC se chevaucheront, quelle que soit la direction.)

3 La marge gauche de chaque élément est cohérente avec la limite gauche du bloc conteneur. . touchant (de gauche à droite), même pour les éléments flottants. (Cela montre que les éléments enfants de BFC ne dépasseront pas son bloc conteneur et que l'élément avec une position absolue peut dépasser la limite de son bloc conteneur

4. La zone BFC ne chevauchera pas l'élément float); zone. ;

5. Lors du calcul de la hauteur de BFC, les éléments enfants flottants participent également au calcul

6. le conteneur ne sera pas affecté. Les éléments externes, et vice versa

Application de BFC

• Empêcher margin de se chevaucher

• Empêcher l'effondrement en hauteur causé par le flottement

Comment générer la valeur du BFC

• float est none ; la valeur de

• overflow n'est pas la valeur de visible

• est

  display inline-block ; table-celltable-caption

• a une valeur de

  ou position ; 🎜>affichage : la table pense également que c'est OK Générer BFC ? En fait, Table générera par défaut une cellule de tableau anonyme, et c'est cette cellule de tableau anonyme qui génère BFC. absolutefixed

Contexte de formatage en ligne (IFC) :

Qu'est-ce que l'IFC ? IFC (Inline Formatting Contexts) se traduit littéralement par « contexte de formatage en ligne ». La hauteur de la zone de ligne IFC (fil de fer) est calculée à partir de la hauteur réelle la plus élevée des éléments en ligne qu'elle contient (non affectée par le remplissage/marge vertical) Caractéristiques de l'IFC

1 La boîte de ligne dans IFC adhère généralement à l'ensemble de l'IFC de gauche à droite, mais elle sera perturbée par les éléments flottants. . L'élément float sera situé entre l'IFC et la zone de ligne, raccourcissant ainsi la largeur de la zone de ligne. 2. Il est impossible d'avoir des éléments de niveau bloc dans IIFC Lorsqu'un élément de niveau bloc est inséré (comme l'insertion d'un div dans p), deux blocs anonymes seront générés séparés du div, cela. Autrement dit, deux IFC seront générés. Chaque IFC apparaît comme un élément de niveau bloc, disposé verticalement avec le div.

Application d'IFC

Centrage horizontal : lorsqu'un bloc doit être centré horizontalement dans l'environnement, le régler sur entraînera le bloc doit être centré horizontalement dans l'environnement. Le calque génère , qui peut être centré horizontalement via

.

1. inline-block Centré verticalement : créez un IFC, utilisez l'un des éléments pour étendre la hauteur de l'élément parent, puis définissez son text-align, et les autres éléments en ligne peuvent être verticaux sous cet élément parent Centré.

2. IFCvertical-align:middleContexte de formatage de la disposition en grille (GFC)

Traduit littéralement par "Contexte de formatage de la disposition en grille" , lorsque vous définissez la valeur sur pour un élément, cet élément obtiendra une zone de rendu indépendante. Nous pouvons définir la ligne de définition de grille sur le conteneur de grille

et la colonne de définition de grille

. Les propriétés définissent chacune une ligne de grille GFC(GridLayout Formatting Contexts) sur un élément de grille display et une colonne de grille grid définit la position et l'espace pour chaque élément de grille （grid container）. （grid definition rows）（grid definition columns）（grid item） changera le mode de mise en page traditionnel, il changera la mise en page d'une mise en page unidimensionnelle à une mise en page bidimensionnelle. En termes simples, avec （grid row）, la mise en page n'est plus limitée à une seule dimension. À l'heure actuelle, il vous est extrêmement facile d'obtenir des effets de mise en page tels qu'une grille à neuf carrés et un puzzle. （grid columns）（grid item）

Contexte de formatage adaptatif (FFC) : GFCGFC

FFC (Flex Formatting Contexts) se traduit littéralement par « contexte de formatage adaptatif », affiche les éléments avec un la valeur de flex ou inline-flex générera un conteneur flex.

Flex Box se compose de conteneurs flexibles et d'articles flexibles. Vous pouvez obtenir un conteneur flexible en définissant la propriété display de l'élément sur flex ou inline-flex. Un conteneur défini sur flex est rendu en tant qu'élément de niveau bloc, tandis qu'un conteneur défini sur inline-flex est rendu en tant qu'élément en ligne.

Chaque élément enfant dans un conteneur flex est un élément flex. Il peut y avoir n’importe quel nombre d’éléments flexibles. Tous les éléments en dehors du conteneur flex et au sein du projet flex ne sont pas affectés. En termes simples, Flexbox définit la manière dont les éléments flexibles doivent être disposés dans un conteneur flexible.

La différence entre le contexte de formatage adaptatif (FFC) et le contexte de formatage au niveau du bloc (BFC) :

FFC est quelque peu similaire à BFC, mais il existe toujours les différences suivantes :

1. Flexbox ne prend pas en charge les pseudo-éléments ::first-line et ::first-letter

2. L'alignement vertical n'a aucun effet sur les éléments enfants dans Flexbox

3. Les attributs float et clear n'ont aucun effet sur les éléments enfants dans Flexbox, et ils n'entraîneront pas non plus la rupture des éléments enfants du flux de documents (mais ils ont un effet sur Flexbox !)

4. Disposition multi-colonnes (colonne- *) Il est également invalide dans Flexbox, ce qui signifie que nous ne pouvons pas utiliser la disposition multi-colonnes pour organiser les éléments enfants en dessous dans Flexbox

5. Les éléments enfants sous Flexbox n'hériteront pas de la largeur de le conteneur parent

Recommandations d'articles connexes :

Traduction CSS : Comprendre le contexte de formatage au niveau du bloc dans CSS_html/css_WEB-ITnose

CSS > Divers calculs de hauteur dans le formatage en ligne context_html/css_WEB-ITnose

Explication détaillée des principes de fonctionnement du contexte de formatage de bloc (contexte de formatage de bloc), du positionnement flottant et absolu_html/ css_WEB- ITnez

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!