Web前端学习—基础篇(13)_基线、底线、中线、顶线、行高、行距分别指什么

前端学习——基础篇

四、CSS学习

4.4、CSS常用样式

4.4.2、理解CSS中的行高与基线

划分：粉色为顶线，蓝色为中线，绿色为基线，红色为底线

​ 顶线：中文汉字的的上端沿；

​ 中线：横过英文字母x的中间的线；

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

​ 底线：中文汉字的下端沿；

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

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

​ 行距：指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然，也可以看作是（上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2。

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

​ 行框（line box）：同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。

​ 行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

用法：
​ 设置元素内容的垂直对齐方式。

参数：

​baseline： 基线对齐(默认值)；

sub： 下标显示；

super： 上标显示；

top： 顶端对齐；

text-top： 文本的顶端对齐；

middle： 中部对齐；

bottom： 底端对齐；

text-bottom： 文本的底端对齐；

百分比和长度： CSS2，可为负数。

inherit: 不继承

​ 注意：顶线和底线是相对于中线来计算的，当line-height为0时，顶线和底线将重合，而中线是相对于基线来计算的，基线始终在中线的下方（x的底部），vertical-algin：middle并不是对其到中线而是对齐到基线以上1/2x的位置。