笔记整理自
学堂在线的刘强老师的视频教学 课程十分清晰、课件简明且附件可以自由下载 超赞！适合初学者也适合有开发者查漏补缺
Web前端攻城狮(2021春)

line box

Font Metrics

4 条线 mean line ~ base line的间距是x-height x小写字母高度

• ascender line 上缘线
• mean line 中线
• base line 基线(大部分字母是以基线对齐)
• descender line 下缘线

行级盒子高度 与行盒内的文字的对齐方式

• 行盒的高度 由文字、行高控制
• ascender line到顶部的距离 descender line到底部的距离时相同的 即实际的文字占用的高度在行盒是居中的
• 行高只包含文字的话
  • 设置垂直方向的padding或者border都不会影响盒子的高度计算
  • 它的高度只和行高有关系

line box内的盒子摆放

行盒内部盒子的垂直对齐方式 由vertical-align决定的

vertical-align：

• baseline default

不同盒子的baseline

1. 文字： 文字自己的baseline
2. 图片： 图片的下边缘
3. inline-block： 最后一行文字的baseline

vertical-align

可以看出下图的行高是3（3em：字体大小*3） 上缘线到顶部的距离是1em 下缘线到底部的距离是1em 不对文字其实不止1em高度 所以上缘线到顶部的距离 以及下缘线到底部的距离不足1em

• vertical-align: baseline
• vertical-align: middle

vertical-align: baserline; /*default*/
vertical-align: middle; /*meanline 图片中间的线和文字meanline对齐*/
vertical-align: top; /*图片上边缘和整个行盒的上边缘 下图中的最上面的那条线 见下图2*/
vertical-align: bottom; 
vertical-align: text-top; /*图片的上边缘和文字的ascenderline对齐 见图3*/
vertical-align: text-bottom; 
vertical-align: 6px; /*基于baseline向上的偏移的量 偏移6px 如果是负值则向下偏移*/

图1

图2

图3