行框基线位置肯定（line box 基线）

在设置vertical-align属性（只有inline元素有效，对inline-block和block元素无效）时有一个属性值：baseline，那么这个基线是什么，怎么肯定。

这个基线就是其所在行的line box基线。设置vertical-align：baseline 属性就是设置其自己元素的inline box（行内框）的基线与行框的基线对其。这里咱们是肯定的行框的基线，知道行框基线，那行内框基线就知道了。

有这样一个关系

　　line-height，font-size

　　　　　　丨

　　　　　　丨 决定

　　　　　　丨

　　　　inline box 的高度

　　　　　　丨

　　　　　　丨 line box 中的全部 inline box 中最高的 inline box 的顶部 和最低的 inline box 的底部高度之差就是 line box 的高度

　　　　　　丨

　　　　line box 高度

　　　　　　丨

　　　　　　丨 在line box 中直接写一个字母 X （这个字母不包含在其余标签里面），X的底部位置就是 line box 的基线位置

　　　　　　丨

　　　　line box 基线（补充：行高（line-height） 的值等于相邻两行基线之间的距离，行距：等于上一行底线和下一行顶线之间的距离）

　　　　　　丨

　　　　　　丨 知道了line box 基线，由于inline box 不设置vertical-align 状况下，默认基线是与 line box 基线对齐的，因此就知道了 inline box 的基线。（若是设置了vertical-align 

　　　　　　丨其余属性值，那么基线的位置会相对line box 有所调整

　　　　inline box 基线（有些标签的基线也不是这样肯定的，如img标签的基线是图片的底部，textarea标签的基线也是底部）

 

参考文章：http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

　　　　　https://www.cnblogs.com/yangjie-space/p/4858132.html