深入理解CSS中的行高与基线

一.基本概念

1. 基线、顶线、底线、中线

注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

2.内容区

内容区是指底线和顶线包裹的区域（行内元素display: inline可以通过background-color属性显示出来， 而块级元素display: block 可以通过background-color属性在整个行内框将背景颜色显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化（如果字体为simsun,即宋体，则font-size值就是内容区域的高度值）。

3. 行距、行高

行高（line-height）：包括内容区与以内容区为基础对称扩展的空白区域，我们称之为行高。一般情况下，也可认为是相邻文本行基线间的距离。

行距：指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然，我更愿意认为是（上文本行行高-内容区高度）/ 2 + （下文本行行高 - 内容区高度）/ 2。   

4. 行内框

行内框是一个浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。

5. 行框

行框（line box），同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

二，属性值详解

  在上面一节中，介绍了文本的基线、顶线、中线和底线，还有内容区、行内框和行框，而本节的垂直对齐和这几个概念密切相关。

1. 基线对齐（vertical-align：baseline）

基线对齐(vertical-align:baseline)使元素的基线同基准元素（取行高最高的作为基准）的基线对齐

2. 顶端对齐（vertical-align：top）

顶端对齐(vertical-align:top)是将元素的行内框的顶端与行框的顶端对齐

3. 文本顶端对齐（vertical-align：text-top）

文本顶端对齐(vertical-align:text-top)是将元素行内框的顶端用文本行的顶线对齐

4. 底端对齐（vertical-align：bottom）

底端对齐(vertical-align:bottom)与顶端对齐(vertical-align:top)相反

5. 文本底端对齐（vertical-align：text-bottom）

6. 中间对齐（vertical-align：middle）

中间对齐(vertical-align:middle)通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。

中线的定义为：中线为于基线的上方，与基线的距离为小写字母x高度的一半（即0.5ex），而ex同font-size相关，大部分浏览器认为1ex = 0.5em（em同样也是相对单位，不是绝对单位），因此会将基线以上四分之一em处作为中线来对齐。

7. 上标和下标

上标(vertical-align:super)使元素的基线相对于基准元素的基线升高，下标(vertical-align:sub)使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。

上下标不会改变元素文字的尺寸大小。

8. 长度值和百分比

和上下标类似，长度值和百分比值可使元素的基线相对于基准元素的基线升高(正值)或者降低(负值)。

上下标的移动尺寸是由浏览器确定的，而设定长度值或者百分比，可以精确控制文字上下移动的幅度。

百分比与行高有关

CSS语法：vertical-align

说明：设置元素内容的垂直对齐方式

参数：

baseline: 基线对齐

top: 顶端对齐

text-top: 文本的顶端对齐

middle: 中部对齐

bottom: 底端对齐

text-bottom: 文本的底端对齐

super: 上标显示

sub: 下标显示

百分比和长度: 

inherit

初始值: baseline

继承性: 不继承