Comment déterminer la ligne de base de différents types de boîtes en HTML

Cette fois, je vais vous montrer comment déterminer la ligne de base de différents types de boîtes en HTML. Quelles sont les précautions pour déterminer la ligne de base de différents types de boîtes en HTML. Voici des cas pratiques. jetez un oeil une fois.

Règles pour déterminer la ligne de base d'une boîte

1.1 Déterminer la ligne de base d'un bloc en ligne

La ligne de base d'un 'bloc en ligne' est la ligne de base de sa dernière case de ligne dans le flux normal, sauf si elle n'a pas de case de ligne entrante ou si sa propriété 'overflow' a une valeur calculée autre que 'visible', auquel cas la ligne de base est la inférieur marge bord.

1.2 Déterminer la ligne de base du remplacement

bord de la marge inférieure

1.3 Déterminer la ligne de base du

est La ligne de base d'un 'inline-table' est la ligne de base de la première ligne du tableau

1.5 Déterminer la ligne de base du bloc

Chaque bloc contient généralement plusieurs lignes de éléments, il a donc également de nombreuses lignes de base, chacune correspondant à une line-box. Déterminer la ligne de base d'une line-box est un peu compliquée Voir le chapitre 2

1.6 Déterminer la ligne de base de chaque ligne de flex-box. (il faudra peut-être le modifier à l'avenir)

Prendre la ligne de base de la première ligne de texte de l'élément flexible le plus élevé d'une ligne comme flex-box La ligne de base de la ligne actuelle

1.7 Déterminer la ligne de base de la line-box (plus complexe)

Tout d'abord, contrairement aux autres types de box, CSS 2.1 ne définit pas la

position

de la ligne de base de la line-box, donc sa ligne de base est incertaine et changera à mesure que le contenu ou le style de l'élément en ligne change. Pour plus de détails sur la façon de modifier, voir la deuxième section

Quels facteurs affecteront la position de la ligne de base de la boîte de ligne

Lorsqu'il y a un élément dans une ligne qui a la même hauteur que le line-box

Parce que l'élément a déjà la même hauteur que la ligne actuelle, donc le

vertical-align

défini sur cet élément n'a aucun effet visuel sur lui-même, mais affectera la position de la ligne de base de la boîte de ligne actuelle.

Lorsqu'il y a plusieurs éléments avec différentes valeurs d'alignement vertical dans une rangée, la position de la ligne de base de la boîte de ligne sera également ajustée pour satisfaire toutes ces valeurs d'alignement vertical en même temps. Jusqu'à ce qu'elle soit déplacée vers la position appropriée, la hauteur de la boîte de ligne du Zhejiang changera souvent en conséquence

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres cas connexes. articles sur le site php chinois !

Lecture connexe :

Comment rediriger la connexion en HTML

Solution à l'élément margin-top invalide dans le balise div

Comment faire fonctionner la sous-page de l'iframe pour bloquer l'effet de calque pop-up de la page parent

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!