CSS进阶之基线（参考线）

一、引入

1.CSS属性

font-size、line-height、vertical-align、font-family
这些属性的它们在页面里是参考的什么线，我们从文字的设计开始。

2.文字

文字是通过一些文字制作软件制作的，比如fontforge
制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
以Consolas字体为例：

文字的相对大小：1000、2048、1024
文字的实际大小（content-area，内容区）：文字顶线到底线的距离
所以行盒的背景大小，就是覆盖content-area。

二.行高

1. 行距= 行间距 + 字体大小
2. 行距：相邻文本行间上一个文本行基线和下一文本行基线间的距离。
3. 行间距: 指相邻文本行间上一个文本行下行线(ascent)和下一文本行上行线(descent)间的距离。
4. 在 CSS 中，CSS 属性 line-height 则是用于设置真实的行距。从 W3C Rec 中看出， CSS 中行高即是行距。
   行间距所占的空间是怎样分配:
   将行间距对半开，然后分别分配到上下两端这是引用了 Half-leading 的概念，Half-leading =行距/2。
   
   顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap（空隙）,gap默认情况下，是字体设计者决定。
   top到botoom（看ppt图），叫做virtual-area（虚拟区），行高，就是virtual-area。line-height:normal，默认值，使用文字默认的gap。
   

文字一定出现一行的最中间——错误
content-area一定出现在virtual-area的中间

<style>
    p{
        background: red;
        font-size: 32px;
        font-family: Arial;
        line-height: normal;
    }
    span{
        font-size: 200px;
        background: lightblue;
        line-height: normal;
    }
</style>
<p>
    M
    <span>
        M
    </span>
    <span style="font-size: 5em;">
        M
    </span>
</p>//这里通过改变line-height可以观察到文字的对齐方式

三、vertical-align

默认对齐方式为 baseline，数量值均是相对于 baseline 而言。

1.一个元素如果子元素出现行盒，该元素内部也会产生参考线

1. baseline：该元素的基线与父元素的基线对齐
2. super: 该元素的基线与父元素的上基线对齐
3. sub：该元素的基线与父元素的下基线对齐
4. text-top: 该元素的virtual-area的顶边，对齐父元素的text-top
5. text-bottom: 该元素的virtual-area的底边，对齐父元素的text-bottom
6. top：该元素的virtual-area的定边，对齐line-box的顶边
7. bottom：该元素的virtual-area的底边，对齐line-box的底边
8. middle: 该元素的中线（content-area的一半），与父元素的X字母高度一半的位置对齐

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

实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
行盒：inline-box
行框：line-box
数值：相对于基线的偏移量，向上为正数，向下为负数。
百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度
line-box是承载文字内容的必要条件，以下情况不生成行框：

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

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

图片：基线位置位于图片的下外边距。
表单元素：基线位置在内容底边
行块盒：

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