Explication détaillée des exemples de lignes et d'alignement vertical en CSS

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 , , , <select>, <object>, les balises agissent comme des espaces réservés, le le contenu réel ne figure pas dans le document et est appelé élément de remplacement. Le navigateur affiche ces éléments en fonction de leur type de balise et de leurs attributs. Par exemple, le contenu de l'élément img est généralement remplacé par l'image spécifiée par son attribut src. Les éléments de remplacement ont généralement des dimensions intrinsèques : une largeur intrinsèque, une hauteur intrinsèque et un rapport intrinsèque. Par exemple, un bitmap a une largeur et une hauteur inhérentes spécifiées en unités absolues, et donc un rapport largeur/hauteur inhérent. En revanche, d'autres documents peuvent ne pas avoir de dimensions inhérentes, comme un document HTML vierge. <br>Le modèle de rendu CSS ne prend pas en compte le rendu du contenu des éléments remplacés. Ces éléments de remplacement sont rendus indépendamment du CSS. L'objet, la vidéo, la zone de texte et l'entrée sont également des éléments de remplacement, et l'audio et le canevas sont des éléments de remplacement dans certaines situations. Les objets insérés à l'aide de la propriété CSS content sont des éléments de remplacement anonymes. </p> </div> <p><strong>Éléments non remplacés</strong></p> <p>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. <br>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. </p> <p><strong>alignement vertical : </strong>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é. <br> 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, <strong> alignez le bas de l'élément sur la ligne de base de son parent </strong>. </p> <p style="text-align: center">                                                                          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. <img src="https://img.php.cn/upload/article/000/000/001/57293ccae2928d6c6f7ea9436d990f90-3.png" alt=""> Bas : alignez le bas de la zone en ligne de l'élément avec le bas de la zone de ligne. </p> 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. <p>Pourcentage : <br> est calculé par rapport à la <br><br>hauteur de ligne<strong></strong> 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. <strong> 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. </strong><strong></strong>Inline-block : inline-block<br>, 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. </p> <p><strong></strong></p>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;. <p><img src="https://img.php.cn/upload/article/000/000/001/5a22f0187e7baaa6ecff1c74b5adbe42-4.png" alt=""></p> <p></p><p>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!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Explication détaillée du modèle de boîte en CSS" href="https://m.php.cn/fr/faq/368062.html">Explication détaillée du modèle de boîte en CSS</a></span><span>Article suivant：<a class="dBlack" title="Explication détaillée du modèle de boîte en CSS" href="https://m.php.cn/fr/faq/368064.html">Explication détaillée du modèle de boîte en CSS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>