参考线：
font-size、line-height、font-family、vertical-align
文字-字体：
文字是由软件制作的，比如font-forge，每种字体的参考线都不一样
字体参考线：
font-size：
我们设置的字体大小，设置的是相对大小，并不是实际大小，
文字默认的相对大小为：1000、1024、2048；就相当与一个框，font-size设置的是框的大小，每个字体不相同。
文字顶线到底线的距离，是文字的实际大小（content-area，内容区）；此区域不可以设置大小，
行盒的背景覆盖content-area区域：
例如当设置font-size为，200px时， 2398/2048 = X/200 ,,
默认：框的大小 ：2048 字体大小 ：2396
font-size=200px时：框的大小：200px ,字体大小 ：X = 233px，
结果背景会大于设置的200px，用span元素包裹看得更清晰。
line-height:
行高：是指顶线向上延伸的空间和向下延伸的空间，向上向下相等，该空间为gap（空隙）；
gap默认由设计字体者决定
top到bottom 叫做virtual-area(虚拟区);此区域可以设置大小，
line-height设置的即为 虚拟区的高度；
line-height：取值
normal;默认值 使用字体的gap
测试：
结构：{
<p>
<span>M</span>
</p>
}
样式：{
p{
background-color: red;
}
span{
font-family: consolas;
font-size: 200px;
background-color: rosybrown;
line-height: 1;
}
}
可以看出，行盒覆盖的时内容区，而块盒覆盖虚拟区；这就解释了为什么 块盒中设置 line-height 为height可以垂直居中；
vertical-align：
font-size 、font-family、line-height 三个确定了参考线’
只要一个元素，包含行盒，那么此元素就会有自己的参考线。
默认情况下：基线对齐，
vertical-align：取值
baseline：该元素的基线与父元素的基线对齐。 自己对齐父元素
super：该元素与父元素上基线对齐。 自己对齐父元素
sub:该元素与父元素的下基线对齐。 自己对齐父元素
text-top：该元素的虚拟区的顶边，对齐父元素的顶边（text-top） 父元素对齐自己，故使父元素的基线发生变化，会影响其他元素；
text-bottom：该元素的虚拟区的顶边，对齐父元素的顶边（text-top）父元素对齐自己，故使父元素的基线发生变化，会影响其他元素
top:该元素的虚拟区的顶边，对齐父元素的顶边（line-box）；
middle：该元素的中线（content-area中间），与父元素的X字母的高度的一般对齐
bottom:该元素的虚拟区的底边，对齐父元素的底边（line-box）；
数值：相对于父元素基线的偏移量，
百分比：相对于自身的虚拟区的高度；
行盒组合起来，可形成多行，每一行区域叫做line-box，line-box的顶边，是此行中最高，底边为最低。
实际上，高度自动时，高度为line-box的叠加。
line-box（行框）：是承载文字的必要条件；一下情况不生成行框
1，元素内部没有任何行盒
2，元素字体为0；
可替换元素和行块盒的基线；
图片：基线在下外边距
表单元素：基线在内容底边位置
行块盒：
1、行快和最后一行由line-box，用最后一行的基线作为整个行块盒的基线
2、如果内部没有行盒，则使用图片的的方式，作为基线