Quel est le concept des blocs inclus en CSS ? Lignes directrices pour inclure des concepts de bloc dans CSS

Le contenu de cet article porte sur quel est le concept de conteneur de blocs en CSS ? CSS contient des directives de concept de bloc, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Élément racine

Par défaut, l'élément html est un bloc conteneur, et certains navigateurs définissent le corps comme un bloc conteneur.

Les éléments non racine sont divisés en deux situations :

1. Pour les éléments non racine qui ne définissent pas de position : absolue, tels que position:relative, position:static

Le bloc contenant inférieur est défini sur le bord de la zone de contenu de l'élément de niveau bloc le plus proche. Notez qu'il s'agit du bord de la zone de contenu, et non des bords de marge et de remplissage.

2. Éléments qui utilisent la position : positionnement absolu

Dans ce cas, le bloc contenant est défini dans la position la plus proche et n'est pas un élément ancêtre statique (l'élément ancêtre ici peut être un élément de niveau bloc, Il peut également s'agir d'un élément en ligne

a. Si l'élément ancêtre est un élément de niveau bloc, le bloc contenant est défini comme le bord de remplissage de l'élément de niveau bloc

;

b. Si l'élément ancêtre est un élément en ligne, il est inclus. Le bloc est défini sur le bord du contenu de cet élément en ligne

Positionnement :

"par rapport à" est relatif ; à la position initiale de l'élément dans le flux de documents CSS.

" absolu. " est relatif à l'élément ancêtre positionné le plus proche

Le positionnement absolu couvrira les autres éléments de la page et l'ordre d'empilement. peut être contrôlé via l'attribut z-index.

Positionnement relatif dans une disposition fluide :

La disposition en flux est la disposition par défaut, naturellement de gauche à droite, de haut en bas. >Si la position de l'élément :relative et les coordonnées sont définies, l'élément sera dans sa position d'origine.

Ce qui précède est l'introduction complète au concept de conteneur de blocs en CSS. pour en savoir plus sur le

Tutoriel CSS3

, veuillez suivre le site Web PHP chinois

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!