QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 1561|回复: 0

[HTML/CSS/JS] CSS行高line-height解析

[复制链接]

等级头衔

积分成就    金币 : 2851
   泡泡 : 1516
   精华 : 6
   在线时间 : 1301 小时
   最后登录 : 2024-12-4

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2022-9-20 14:49:57 | 显示全部楼层 |阅读模式
       之前设置div中的文本垂直居中的时候,习惯性的使用height和line-height等于相等的值的方式实现垂直居中效果,但是没有深刻理解过line-height这个属性的具体含义,今天抽空查阅了相关文档,也算是比较清晰了解了line-height这个属性以及当他与height值相等时使得文字能垂直居中的原理,简单记录一下。
. m7 S8 S6 Y- D. \3 A. z       首先抄一下mdn上关于line-height 的相关介绍:line-height属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非[替代]的 inline 元素,它用于计算行盒(line box)的高度。这句话看起来很绕,我也没理解透彻,试验了几番感觉line-height并没有指定块级元素的最小高度,而是在块级元素没有设置height的情况下,会取line-height设置的高度作为默认高度,行级元素的话就直接由line-height指定其高度。
& J  y5 l$ m1 H* G# m- u2 g5 y       还有行高比较通俗易懂的解释是:行高是指文本行基线间的垂直距离。基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下面放一张盗来的图具体解释一下相关概念。5 o+ t7 Y5 C2 b
1.jpg 9 P) B3 J( D( T0 M' A% p3 P/ \
  • 顶线:文字顶部对齐的线
  • 中线:文字中部的画线
  • 基线:英文字母下端沿线
  • 底线:文字底部对齐的线
  • 文字高度:即我们熟悉的font-size值,就是顶线到底线的距离. w' P- j$ W: Z) h/ T/ n
       当存在多行文本时,可以看到:
% b; G) R1 Y' J8 f  C! n
  • 行距:相邻两行之间,上行底线距下行顶线的距离
  • 半行距:顾名思义,行距的一半,单独提出来有重要作用
    9 s, c, Q, x' X! @
       接下来讲一下本文的重点:height、line-height与font-size之间的关系。由图可知,line-height的值等于中线到底线的距离 +行距 + 顶线到中线的距离,即 行距 + font-size。然后观察图中多行文本的上面或者下面一行(推荐下面一行)当做单行文本来看,一行的高度 = 半行距 + font-size +半行距,即 行距 + font-size,即line-height值。当line-height值变大时,也就是图中一行的高度变大,其中font-size的值是不会变化的,所以line-height值的变化影响的是行距或半行距值的变化。当div的height等于line-height时,就相当于把图中一行整体占满div高度放入div中,此时文字自然垂直居中。设想此时增大line-height的值,div最高处与行顶部对齐,增大line-height的值导致半行距增大,即文字距离顶部的距离增大,div的高度此时不变,文字就会偏离中心位置向下位移,反之减小div的值,文字就会向上偏移。* S# \4 l2 K3 i
       综上所述:line-height = 半行距 + font-size + 半行距 ,如果font-size 不改变大小,那么line-height的值同半行距将保持线性关系,直观表现就是line-height的值的改变会改变文本顶线到border-top之间的距离。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-12-4 04:21

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表