Ordre de formatage des éléments en ligne : taille de la police-->boîte em-->zone de contenu-->boîte en ligne-->placer la boîte en ligne en fonction de la ligne de base-->déterminer la hauteur du zone de ligne
Concepts associés :
interligne (interligne) : fait référence à la barre de plomb remplie entre deux lignes de texte, égal à la hauteur de la ligne et à la police La différence entre -size, la moitié de l'interlignage est ajoutée au-dessus du texte et l'autre moitié de l'interlignage est ajoutée sous le texte, utilisée uniquement pour les éléments non remplacés. Case
em : La case em indique la distance entre les lignes de base lorsqu'il n'y a pas d'espacement des lignes. Aucune limite entre les caractères n'est spécifiée. Le glyphe réel peut être plus détaillé. que sa boîte em. Grand ou plus court.
font-size : Détermine la hauteur de la zone em pour une police donnée, mais il n'y a aucune garantie que les caractères réellement affichés auront cette taille. La correspondance spécifique entre l'attribut font-size et la taille réelle de la police est déterminée par le concepteur de la police.
Ligne de base : la ligne sur laquelle la plupart des lettres « reposent » et en dessous de laquelle s'étendent les descendants, n'est pas le bord inférieur des caractères chinois, mais le bord inférieur de la lettre anglaise « x ».
Zone de contenu (zone de contenu) : Les éléments non remplaçables sont des boîtes composées de boîtes em enchaînées ensemble, indirectement déterminées par la taille de la police ;Elément de remplacement : la hauteur inhérente de l'élément plus les éventuelles marges et cases.
Boîte en ligne (boîte en ligne) : Une boîte rectangulaire virtuelle qui ne peut pas être affichée. La taille est la zone de contenu plus. menant. Pour les éléments non remplacés, elle est égale à la valeur de la hauteur de ligne ; pour les éléments remplacés, elle est égale à la hauteur de la zone de contenu. Plusieurs éléments au sein d’une même ligne peuvent avoir des hauteurs de ligne et des hauteurs de boîte en ligne différentes.
Boîte de ligne (boîte de ligne) : La plus petite boîte qui contient les points les plus élevés et les plus bas de toutes les boîtes en ligne de la ligne, la line box La hauteur est uniquement liée à la hauteur de ligne de l'élément dans cette ligne, , mais n'a pas de relation directe avec la hauteur de ligne, ni avec la hauteur (hauteur) de l'élément parent . Les boîtes en ligne sont alignées verticalement sur la ligne en fonction de la valeur de leur propriété d'alignement vertical.
Texte anonyme : fait référence à toute chaîne qui n'est pas contenue dans un élément en ligne.
line-height : fait référence à la distance entre les lignes de base de la ligne de texte, qui détermine l'augmentation ou la diminution de chaque zone d'élément. La valeur par défaut est de 1,2 fois la taille de la police de l'élément lui-même.
Lorsque la valeur line-height est héritée de l'élément parent, elle hérite de la valeur calculée sur l'élément parent, et non de la valeur calculée sur l'élément enfant (em, etc.). S'il s'agit d'un facteur d'échelle (une valeur numérique pure sans unités), le facteur d'échelle est hérité, et non la valeur calculée. Le produit du facteur d'échelle et de la taille de police de l'élément enfant est finalement calculé.
Figure 1 :
Figure 2 : Ligne en CSS
Figure 3 : Ligne OK hauteur de la boîte
Élément de remplacement
Les marges et les bordures de l'élément remplacé affecteront la boîte en ligne de l'élément, ce qui à son tour affecte la hauteur de la zone de ligne.
Éléments dont le contenu n'est pas contrôlé par le modèle de formatage visuel CSS, tels que , ,
Éléments non remplacés
Tous les autres éléments autres que les éléments remplacés sont des éléments non remplacés. Le contenu réel est dans le flux de documents et le modèle de formatage visuel de CSS en est responsable. pour le rendu des éléments non remplacés.
Les marges et bordures des éléments non remplacés n'affecteront pas la hauteur de la boîte en ligne des éléments de ligne.
alignement vertical : Alignement vertical, applicable uniquement aux éléments en ligne, aux éléments de remplacement et aux cellules de tableau, et ne peut pas être hérité.
La valeur par défaut est la ligne de base, qui aligne la ligne de base de l'élément en ligne avec la ligne de base de la ligne ; le texte est aligné en fonction de la ligne de base. Si un élément aligné verticalement n'a pas de ligne de base, comme une image, un élément de saisie de formulaire ou un autre élément de remplacement, alignez le bas de l'élément sur la ligne de base de son parent .
des lettres comme f, j, p et q. Méthode de réparation : définissez la valeur de l'attribut d'alignement vertical de l'image ou modifiez display:block ou modifiez la taille de la police/la hauteur de la ligne de l'élément parent pour obtenir la hauteur de l'inline. boîte plus petite que l'image. Dans le cas extrême de font-size:0; de l'élément parent, la ligne centrale et la ligne de base coïncideront. Bas : alignez le bas de la zone en ligne de l'élément avec le bas de la zone de ligne.
Milieu : alignez la ligne centrale de la boîte de l'élément en ligne avec un point situé à 0,25em au-dessus de la ligne de base, qui est également égal à la distance de la ligne de base correspondant à la moitié de la hauteur de la lettre minuscule x (c'est-à-dire 0,5ex). Le milieu du caractère x ne constitue pas la ligne centrale absolue de la zone de contenu, car le caractère x va quelque peu s'enfoncer.Pourcentage :
est calculé par rapport à la
hauteur de ligne de l'élément. La fonction de la hauteur de ligne des éléments remplaçables en ligne est d'aider à calculer l'alignement vertical. Valeur de longueur spécifique : augmentez ou abaissez un élément d'une distance spécifiée par rapport à la ligne de base de l'élément parent. Le texte aligné verticalement ne couvre pas le texte des autres lignes ; il affecte uniquement la hauteur de la ligne actuelle afin qu'elle soit suffisamment grande pour contenir le haut de la boîte en ligne la plus haute et le bas de la boîte en ligne la plus basse. Inline-block : inline-block
, l'élément inline-block sera placé dans la ligne en tant qu'élément de remplacement, c'est-à-dire que le bas du bloc en ligne est placé sur la ligne de base de la ligne de texte par défaut. Pour ie6/ie7, {display:inline; zoom:1;...} doit être utilisé pour prendre effet. Habituellement utilisé pour que les listes de menus horizontales ou les éléments de liste de hauteur inégale soient soigneusement disposés. Cependant, l'espace entre les balises li sera traité comme un élément en ligne et un espace vide de 4 pixels sera affiché sur la page. Vous pouvez éliminer l'espace vide en passant l'élément parent font-size:0 et l'élément enfant font-size : 12 pixels ; Pour ie6/ie7/safari, l'espacement des mots et l'espacement des lettres doivent être utilisés pour ajuster.
Les blocs en ligne sont alignés sur la ligne de base par défaut, mais il existe des réglementations spéciales pour déterminer la ligne de base. Le la ligne de base d'un « bloc en ligne » est la ligne de base de sa dernière boîte de ligne dans le débit normal, sauf s'il n'a pas de boîtes de conduites d'entrée ou si son « débordement » la propriété a une valeur calculée autre que « visible », auquel cas la ligne de base est le bord de la marge inférieure. Ainsi, la disposition ci-dessous apparaîtra, qui peut être corrigée en modifiant vertical-align:top;.
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!