CSS文字与文本样式之文本行高line-height详解

一、基本介绍

line-height：
对于代替元素，line-height没有影响
对于非代替元素，line-height才有影响
对于块级元素，css属性line-height指定了元素内部line-box的最小高度
对于行内元素，line-height用于计算line-box的高度

默认值： normal 可继承

值：
normal
取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2
<number>
该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。
<length>
指定<length> 用于计算 line box 的高度。
<percentage>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。

行高继承的注意事项：
- 父级行高使用的是百分比的话，子级继承的是父级百分比计算过后的值；
- 父级行高使用的是number因子的话，子级直接继承的是父级的number因子。

二、顶线、中线、基线、底线

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格。

三、行高、行距、半行距

1.行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
2.行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

3.半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

四、内容区、行内框、行框

1**、内容区**：底线和顶线包裹的区域，即下图深灰色背景区域。
文本行中的每个元素都会生成一个内容区，这个由字体的大小确定。这个内容区则会生成一个行内框。
如果不存在其他因素，这个行内框就完全等于该元素的内容区，由line-height产生的行间距就是增加 和减少各行内框高度的因素之一。

2.行内框 : 行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框默认等于内容区域， 将line-height的计算值减去font-size的计算值，这个值就是总行距，这个值可能是个负值，任何将行间距/2 分别应用到内容区的顶部和底部，其结果就是该元素的行内框。
3.行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。默认情况下行框高度等于本行内所有元素中行内框最大的值（一行上垂直对齐时以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。