字体
文字的实际大小（content-area，内容区）：文字顶线到底线的距离
所以行盒的背景大小，就是覆盖content-area。
line-height
- 行距= 行间距 + 字体大小
- 行距：相邻文本行间上一个文本行基线和下一文本行基线间的距离。
- 行间距: 指相邻文本行间上一个文本行下行线(ascent)和下一文本行上行线(descent)间的距离。
在 CSS 中，CSS 属性 line-height 则是用于设置真实的行距。从 W3C Rec 中看出， CSS 中行高即是行距。
vertical-align
默认对齐方式为 baseline，允许指定负长度值和百分比值,均是相对于父级 baseline 而言。
一个元素如果子元素出现行盒（inline、inline-block），该元素内部也会产生参考线
- 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字母高度一半的位置对齐
- 百分比：正值基于父元素的baseline向下偏移对齐
- 高度（允许负值）：正值基于父元素的baseline向上偏移对齐，负值基于父元素的baseline向下偏移对齐
行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。
实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
- 行盒：inline-box
- 行框：line-box
- 数值：相对于基线的偏移量，向上为正数，向下为负数。
- 百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度
line-box是承载文字内容的必要条件，以下情况不生成行框：
- 某元素内部没有任何行盒（空元素）
- 某元素字体大小为0
可替换元素和行块盒的基线
- 图片：基线位置位于图片的
下外边距。 - 表单元素：基线位置在内容底边。
- 行块盒：行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。如果行块盒内部没有行盒，则使用
下外边距作为基线。
版权声明：本文为CSDN博主「飞羽逐星」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/xun__xing/a…
