Flux de documents CSS, éléments de niveau bloc (block) et éléments en ligne (inline). J'ai déjà lu de nombreux livres et lu de nombreux articles, c'est une connaissance de base fragmentaire de la mise en page CSS, qui est relativement superficielle. O'Reilly, j'ai trouvé que le concept de flux de documents qui y était mentionné me rendait très sensible. Malheureusement, le livre n'explique pas ce qu'est le flux de documents. Peut-être que l'auteur a pensé que c'était trop simple pour mériter d'être mentionné. C'est vraiment important. Après l'avoir compris, un certain nombre de théories de mise en page CSS deviennent faciles à comprendre et je réalise la rationalité de la conception CSS. J'ai donc basé mes suppositions et mes expériences pour trouver une explication, s'il y a des erreurs, c'est tout à fait normal. .
flux de documents
Divisez le formulaire en lignes de haut en bas et disposez les éléments dans chaque ligne de gauche à droite, ce qui correspond au flux de documents.
Chaque élément non flottant au niveau du bloc occupe sa propre ligne et les éléments flottants flottent à une extrémité de la ligne selon les besoins. Si la ligne actuelle ne peut pas tenir, elle flottera sur une nouvelle ligne.
Les éléments en ligne n'occuperont pas de ligne. Presque tous les éléments (y compris les éléments de niveau bloc, en ligne et de liste) peuvent générer des sous-lignes pour placer des sous-éléments.
Il existe trois situations qui entraîneront l'existence d'éléments hors du flux de documents, à savoir le positionnement flottant, absolu et fixe. Mais dans IE, les éléments flottants existent également dans le flux de documents (ce qui me fait penser que c'est raisonnable><).
Les éléments flottants n'occupent aucun espace de flux de documents normal, et le positionnement des éléments flottants est toujours basé sur le flux de documents normal, puis extrait du flux de documents et déplacé aussi loin que possible vers la gauche ou la droite. Le contenu du texte sera enroulé autour de l'élément flottant. Lorsqu'un élément est extrait du flux de documents normal, les autres éléments toujours présents dans le flux de documents ignorent l'élément et remplissent son espace d'origine.
Le concept déroutant de flottement est causé par l'interprétation de la théorie par le navigateur. On peut seulement dire que de nombreuses personnes utilisent IE comme standard, mais en réalité ce n'est pas le cas.
Sur la base du flux de documents, nous pouvons facilement comprendre les modèles de positionnement suivants :
positionnement relatif,
Autrement dit, l'élément est décalé par rapport à sa position dans le flux de documents, mais l'espace réservé d'origine est conservé.
positionnement absolu,
Autrement dit, il est complètement séparé du flux de documents et est décalé par rapport à l'élément parent le plus proche avec une valeur non statique de l'attribut position.
positionnement fixe,
Autrement dit, il est complètement séparé du flux de documents et décalé par rapport à la fenêtre d'affichage.
Il y a encore quelques questions que je n'arrive pas à comprendre ensuite.
En tant qu'un des trois éléments de base, quelle est la principale différence entre les éléments en ligne et les éléments de niveau bloc ?
Comment comprendre quand la propriété Clear prend la bonne valeur ? Il semble que la situation expérimentale soit toujours incompatible avec la théorie ?