Comment créer un contexte de formatage au niveau du bloc ? Le rôle du contexte de formatage au niveau du bloc

Qu'est-ce que le contexte de formatage au niveau du bloc en CSS ? Le contexte de formatage de bloc fait partie du rendu visuel du CSS sur les pages Web et est utilisé pour déterminer la disposition des zones de bloc. Dans le schéma de positionnement, il appartient au flux normal. Alors, comment créer un contexte de formatage au niveau du bloc ? Quelles sont les conditions requises pour créer un formatage au niveau du bloc ? Cet article vous l’expliquera un par un.

FC (Formatting Context) se traduit par contexte de formatage/plage de formatage, qui fait référence à une zone de la mise en page. Il a ses propres règles de rendu et détermine la façon dont ses propres sous-éléments sont disposés. et sa relation et son rôle avec d'autres éléments.

Selon la classification d'affichage CSS, les éléments xhtml sont divisés en trois types : les éléments de bloc, les éléments en ligne et les éléments variables. Lors de l'ajout de styles aux éléments de page, nous devons savoir de quel type est l'élément, puis nous pouvons convertir le type d'élément nous-mêmes. Tout comme nous pouvons utiliser display pour transformer un élément en ligne en élément de bloc (display: block). Il existe plusieurs éléments spéciaux img, et l'entrée est en ligne par défaut

Qu'est-ce qu'un contexte de formatage de bloc (BFC) ? Équivalent à une zone spéciale.

Si un élément remplit les conditions pour devenir un BFC, l'élément devient un conteneur indépendant isolé. Les éléments internes de l'élément seront disposés verticalement le long de la bordure de son élément parent et n'affecteront pas. les éléments extérieurs de chacun.

Les conditions de déclenchement de BFC sont les suivantes :

1. Éléments flottants, valeurs flottantes autres qu'aucune

2. , position (absolue, fixe)

3. display est l'une des valeurs suivantes : inline-blocks, table-cells, table-captions. //Il s'agit d'un conteneur de blocs qui n'est pas une boîte de niveau bloc

4. Valeurs de débordement autres que visibles (caché, auto, défilement)

Si l'une des quatre conditions ci-dessus est rempli, il peut être créé un contexte de formatage au niveau du bloc, l'environnement dans lequel se trouve le contenu est l'environnement du contexte de formatage au niveau du bloc.

En CSS3, BFC est appelé Flow Root, et certaines conditions de déclenchement sont ajoutées :

1 La valeur de légende de table d'affichage

2. . La valeur fixe de position est en fait une sous-classe d'absolu, donc l'utilisation de cette valeur dans CSS2.1 déclenchera également BFC, mais cela est plus clair dans CSS3. L'élément

définit l'attribut CSS spécifique à IE zoom : 1 pour déclencher hasLayout. Le zoom est utilisé pour définir ou récupérer le taux de zoom de l'élément. Une valeur de "1" signifie utiliser la taille réelle. de l'élément. Utilisation du zoom : 1 les deux Il peut déclencher hasLayout sans provoquer d'autres effets sur les éléments, ce qui est relativement plus pratique. C'est la situation sous IE

Le rôle du contexte de formatage au niveau du bloc (BFC) :

(1) BFC empêchera les marges de effondrement

Je comprends que le pliage signifie que les marges extérieures se chevaucheront et ne seront pas clairement distinguées. C'est comme si ce qui est à toi est à moi et ce qui est à moi est à toi.

Règles de réduction des marges : seulement lorsque deux éléments au niveau du bloc sont adjacents et dans le même contexte de formatage au niveau du bloc, les marges verticales entre eux se chevauchent. Autrement dit, même si deux éléments de niveau bloc sont adjacents, leurs marges ne s'effondreront pas s'ils ne se trouvent pas dans le même contexte de formatage de niveau bloc. Par conséquent, empêcher l’effondrement des marges aboutit simplement à un nouveau BFC.

Mais pour deux éléments adjacents, cela ne veut pas dire grand-chose, il n'est pas nécessaire de leur ajouter un shell, mais c'est nécessaire pour les éléments imbriqués. De cette façon, la marge de l’élément enfant ne s’effondrera pas avec la marge de l’élément parent.

(2) BFC peut contenir des éléments flottants

Cela montre que le sous-élément dans BFC ne dépassera pas son bloc conteneur, tandis que l'élément avec une position absolue peut dépasser La bordure du bloc contenant

(3) BFC peut empêcher les éléments d'être recouverts par des éléments flottants

Ceci est basé sur le côté gauche de la zone de marge de chacun. l'élément et la zone de bordure du bloc contenant touchent le côté gauche de (pour un formatage de gauche à droite, sinon vice versa). Cela est vrai même s'il y a du flotteur. Ce principe est réalisé.

Articles connexes recommandés :

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

CSS comprend le contexte de formatage au niveau du bloc BFC

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- ITnose

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!