WEB中的参考线

参考线主要是起到对齐的作用

文字

首先文字是通过文字制作软件（例如：fontforge）制作出来的。

制作文字的时候，会有几根参考线，不同的文字类型，参考线的相对位置也不一样（不一定就是等分的）。同一种文字类型，参考线的相对位置是一致的。

从上到下，参考线分别是：

序号	英文	中文	说明
1	top	无	与gap相关
2	text top / ascent	顶线 / 顶边	文字顶部
3	super	上基线	与对齐相关
4	baseline	基线	与对齐相关
5	sub / ascent	下基线	与对齐相关
6	text bottom / descent	底线 / 底边	文字底部
7	bottom	无	与gap相关

content-area（内容区）：文字顶线到底线的距离，也就是文字实际的大小

行盒的背景： 是覆盖 content-area 的区域。

文字的相对大小：

文字的相对大小的常用取值：1000,2048,1024。

如上图，当字体的相对大小的高度尺寸是2048的时候，从顶线到底线的距离是2398（这个尺寸是文字制作软件中，顶线到基线的距离 加上 基线到底线的距离），或者 可以理解为，一个字体的高度是2048个像素，但是实际的占用区域的高度是2398个像素。在字体大小缩放的时候，就是按照这个比例进行缩放的。

注意：字体的宽度随字体不同，宽度都是不同的（例如有些字体的W和I的占用区域的宽度就不一样，但是有些字体的W和I的占用区域的宽度是一样的）。

font-size：设置的是文字相对大小

行高

首先要明白下列知识点：
line gap：顶线向上延伸的空间（顶线 到 top 的距离），和底线向下延伸的空间（底线 到 bottom 的距离），两个空间一定是相等的，该空间叫做 line gap，line gap 默认情况下是字体设计者决定的。有的可能是0，甚至有的是负数。

vartual-area（虚拟区域）：top 到 bottom 之间的距离叫做vartual-area（虚拟区域）

行高：就是vartual-area（虚拟区域），就是间接设置line gap。

line-height: normal		// 默认值，使用文字默认的gap
line-height: 1		// 注意，不要将值设为1，因为行与行之间可能会重叠

注意：文字不一定出现在一行的最中间，因为文字的对齐是和参考线有关。比如一个大号字体和一个小号字体在同一行，那么小一号的文字是不会和大一号的文字居中对齐的，因为文字是根据参考线而对齐的，而不是居中对齐的，下面有介绍文字的对齐方式。

vertical-align

决定参考线：font-size、font-family、line-height

只要一个元素如果子元素出现行盒，那么该元素内部也会产生参考线

<p>
M
</p>

上面代码中 p 元素也是有参考线的，因为文字一定处在行盒的里面，如果没设置行盒，则会自动增加一个行盒包裹文字。因为文字是根据参考线排列的，如果没有行盒，就没有参考线，那么文字无法排列了。所以文字一定在行盒里面，会包裹一个匿名行盒。

文字也有参考线，元素也有参考线，默认情况下是基线对齐（文字的基线和元素的基线对齐）的，比如 p元素的基线和M文字的基线对齐。

行盒是：inline-box

**line-box：**行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边

line-box 是承载文字内容的必要条件，以下情况不生成line-box

1. 某元素内部没有任何行盒
2. 某元素字体大小为0

vertical-align的值：

baseline：该元素的基线与父元素的基线对齐
super：该元素的基线与父元素的上基线对齐
sub：该元素的基线与父元素的下基线对齐
text-top：该元素的 top 与父元素的 text top 对齐（注意是增加 gap 的）
text-bottom：该元素的 bottom 与父元素的 text bottom 对齐（注意是增加 gap 的）
top：该元素的 top 与 line-box 的顶边对齐
bottom：该元素的 bottom 与 line-box 的底边对齐
middle：该元素的中线（content-area的一半）与父元素的X字母高度的一半对齐。
数值：相对于父元素基线的偏移量。向上为正数，向下为负数。
百分比：相对于自身的 virtual-area 的高度。

一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。

可替换元素的参考线

图片：图片的基线位置位于图片的下外边距位置，所以图片会有白边
两种解决方法：font-size:0 或者 display: block

表单元素：表单元素的基线位置在内容的底边

行块盒

1. 行块盒最后一行有line-box，用最后一行的基线作为行块盒的基线
2. 如果行块盒内部最后一行没有行盒，则使用下外边距作为行块盒的基线

总结的比较乱，凑活看吧……