1.1 顶线,中线,基线和底线 : 直接见下图。inline-block和inline都可以有这四种线。其中,我们重点研究基线,即base line。基线并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 1.2 行高: 即line-height,是指同一个元素中,两个文本行基线间的垂直距离。
<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
一般而言,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算出来的。 下面一一解释。
可见,子元素随着自身 font-size 的大小而做相应比例的缩放。
总结如下:
那么,哪一种是最好的方式呢? 一般来数,设置行高的值为纯数字是最推荐的方式,因为其会随着对应的 font-size 而缩放。
通常情况下,div中的a标签包含文本,文本将默认出现在div的顶端,如果想要垂直居中,可以设置div的高度等于行高,由于行高不直接作用于块状元素且行高可以继承,所以实际上等效于设置a的行高等于div的高度。
a的行高即a的行内框高度,即 内容区+行距。行高默认是浏览器分配的1.2,由于此时重新设置了行高☞☞所以行距跟着改变☞☞所以内容区上下往外延伸☞☞即行内框整体延伸。但是,文字始终在行内框里垂直居中,行内框延伸的终点是div的高度,也就是延伸至行内框高度等于div高度。此时,文本自然会在div中垂直居中。