前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >深入理解line-height

深入理解line-height

作者头像
Chor
发布2019-11-08 00:34:50
2.1K0
发布2019-11-08 00:34:50
举报
文章被收录于专栏:前端之旅

1.相关概念普及:

1.1 顶线,中线,基线和底线 : 直接见下图。inline-block和inline都可以有这四种线。其中,我们重点研究基线,即base line。基线并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 1.2 行高: 即line-height,是指同一个元素中,两个文本行基线间的垂直距离。

代码语言:javascript
复制
<div style="width:170px;">
     <span style="font-size:16px;line-height:20px;background:red;">
     I'm the first line
     </span>
     <span style="font-size:16px; line-height:40px;background:green;">
     I'm the second line
     </span>
</div>

比如上图或者下图中两条红线之间的距离。 1.3 行距:上行的底线和下一行的顶线之间的距离就是行距,行距的一半称为半行距 1.4 字体大小:即font-size,是指同一行的顶线和底线之间的距离

从上图我们就可以看出,行距、font-size与行高之间的关系满足

行距 = (行高 - font-size)

当font-size等于行高时,行距 = 0,如下图

而当font-size大于行高时,行距为负值,则两行重叠,如下图:

1.5 CSS boxes的四种类型(containing boxes、inline boxes、line boxes、content area)

1.5.1 content area (内容区): 内容区是包围着文字的一种box,无法显示出来。 在没有其他因素 (比如padding) 的影响时,内容区的高度即为font-size。

1.5.2 inline box (行内框) : 每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来。 在没有其他因素 (比如padding) 的影响时,行内框的高度即为内容区的高度; 设定line-height后,实际改变的是行距,行内框的高度将由 内容区 变为 内容区+行距。因此,此时会有行内框高度=行高。

1.5.3 3.line box(行框) : 行框是指本行的一个虚拟的矩形框,由该行中一个个行内框组成。行框也是浏览器渲染模式中的一个概念,无法显示出来。 行框高度等于本行中所有行内框高度的最大值。当有多行内容时,每一行都有自己的行框。

1.5.4 containing box(包含框): 包裹着上述三种box的box

2. line-height的取值方法与继承

一般而言,line-height只影响行内元素( 包括行内替换元素和行内非替换元素,如img和span ),并不能直接应用于块级元素。但是line-height 具有可继承性,块级元素的子元素会继承该特性,并且在行内元素上生效。

一般情况下,浏览器默认的line-height为1.2。可以自定义 line-height 覆盖这个初始值,那么该怎样设置line-height呢?有以下5种方式:

line-height是个可继承属性,它的继承规则比较复杂。需要提前说明的是:line-height的大小与font-size息息相关,除了指定line-height为多少px,剩下的设置方式都是基于font-size算出来的。 下面一一解释。

  • inherit :继承父元素line-height的值,所以父元素的是多少就是多少。 如果其后代元素不设置line-height 的话,也会是这个值。
  • 数字+px: 假设设置 line-height 为20px,那么该行的行高就是20px,与 font-size 无关,不会随着 font-size 做相应比例的缩放。 这个长度值(20px)会被后代元素继承,所有的后代元素会使用这个相同的、继承的 line-height (20px),除非后代元素设定 line-height 。
  • 数字+% :假设自身的 font-size 为16px,line-height 设为120%。那么其行高为:16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的line-height,它继承的不是百分比而是父元素line-height计算后的最终值。
  • normal :假设设置line-height 为 normal ,则会根据浏览器的解析情况给元素分配一个倍数,一般是1.2,即line-height为字体的1.2倍。与上一个不同的是,其子元素不再继承其line-height计算后的最终值,而是根据子元素自身的 font-size 进行计算。见下表~

可见,子元素随着自身 font-size 的大小而做相应比例的缩放。

  • 纯数字/缩放因子 :如果既想要 normal 的灵活,又想设置一个自定义的值,那就要用 纯数字 。纯数字方式与 normal 唯一的不同,在于数值的大小不一定是1.2,而是完全由你自己决定。同样地,其子元素不是继承其line-height计算后的最终值,而是根据子元素自身的 font-size 进行计算。见下表~

总结如下:

那么,哪一种是最好的方式呢? 一般来数,设置行高的值为纯数字是最推荐的方式,因为其会随着对应的 font-size 而缩放。

3 line-height实现垂直居中的原理

通常情况下,div中的a标签包含文本,文本将默认出现在div的顶端,如果想要垂直居中,可以设置div的高度等于行高,由于行高不直接作用于块状元素且行高可以继承,所以实际上等效于设置a的行高等于div的高度。

a的行高即a的行内框高度,即 内容区+行距。行高默认是浏览器分配的1.2,由于此时重新设置了行高☞☞所以行距跟着改变☞☞所以内容区上下往外延伸☞☞即行内框整体延伸。但是,文字始终在行内框里垂直居中,行内框延伸的终点是div的高度,也就是延伸至行内框高度等于div高度。此时,文本自然会在div中垂直居中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-02-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.相关概念普及:
  • 2. line-height的取值方法与继承
  • 3 line-height实现垂直居中的原理
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档