参考线--深入了解字体

概述：只有行盒才会产生参考线，制作文字时，会有五根参考线，不同的文字类型，参考线不一样，同一文字类型，参考线一致 ，一个元素如果子元素出现行盒，该元素内部也会产生参考线（这里的知识了解即可）

五根参考线：

text top ascent 顶线

super 上基线

baseline 基线

sub 下基线

text bottom，descent 底线

font-size

字体大小，设置的是文字的相对大小

文字的相对大小：1000、2048、1024

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

行盒的背景覆盖的是内容区

line-height 行高

顶线向上延伸的空间top，和底线向下延伸的空间bottom，两个空间相等，该空间叫做gap（空隙）

gap默认情况下，是字体设计者决定

top到bottom，叫做virtual-area（虚拟区）

行高就是virtual-area

line-height：normal （默认值）使用文字默认gap

文字一定出现在行盒中的中间————这个说法错误 （文字出现在内容区 而文字的具体位置由设计者决定）
content-area一定出现在virtual-area中间————这个说法正确（基线重叠）

vertical-align（该属性设置元素的垂直对齐方式。）

决定参考线：font-size、font-family、line-height 这三个属性确定下来参考线就确定了

###　vertical-align取值有三种：

1. 预设值：

   baseline:该元素的基线与父元素的基线对齐
   super:该元素的基线与父元素的上基线对齐
   sub：该元素的基线与父元素的下基线对齐
   text-top：该元素的virtual-area的顶边，对齐父元素的text-top
   text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom
   top:该元素的virtual-area的顶边，对齐line-box的顶边
   bottom：该元素的virtual-area的底边，对齐line-box的底边
   middle:该元素的中线（content-area的一半位置），与父元素的x字母高度的一半的位置对齐

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

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

2. 数值：相对于基线的偏移量，向下为正数，向下为负数

3. 百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

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

1. 某元素内部没有任何行盒

2. 元素内部行盒大小为0

可替换元素和行块盒的基线

1）图片：基线位置位于图片的下边框。

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

3）行块盒：

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