关于css行高line-height的一些笔记

前言
对于CSS中的行高并没清楚的理解，为了更加理解其原理，通过查找了很多博客以及资料，对行高有了进一步的理解，下面通过这张图（在很多博客中有引用），对顶线、中线、基线、底线、行高、行内框、行框的理解有所帮助。

在英文字母中有一个关键的字母x，具有其特殊的非常重要的意义，而CSS中的基线，正是字母x的下沿线，中线则是x的交叉点的水平线，底线是文本内容区的下沿线，顶线是文本内容区的上沿线，一定得记住这些线，在下面还有其更重要的用处。对于中文和英文会有一定的偏差（还没弄懂，可能是英文字母有大小写）。

看完一些基本的线，现在来看一些关于文本的其他内容。
1.内容区
内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。

3.行距、行高
行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离。
行距：指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然，我更愿意认为是（上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2。

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

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

下面我们来说说vertical-align属性（垂直居中）
如果行内含有图片和文字，在浏览器渲染出来后，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐。这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align:baseline）。

CSS语法：vertical-align
语法：
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
垂直对齐属性只对文本有效（是指包含了#Text节点的元素节点才能正确地处理vertical-align属性）。同时，该属性不能继承。

在上面一节中，介绍了文本的基线、顶线、中线和底线，还有内容区、行内框和行框，而本节的垂直对齐和这几个概念密切相关。
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.长度值和百分比
和上下标类似，长度值和百分比值可使元素的基线相对于基准元素的基线升高（正值）或者降低（负值）。

上下标的移动尺寸是由浏览器确定的，而设定长度值或者百分比，可以精确控制文字上下移动的幅度。
百分比与行高有关（line-height），例如有如下代码，其显示如图7-44所示。

css行高line-height的一些深入理解及应用