如何确定行框盒子的baseline？
先解释一下相关概念（概念来自于张鑫旭偶像的《CSS世界》）
内联盒子（inline box）
“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：
行框盒子（line box）
每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。
包含盒子（containing box）
<p>标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。
需要补充说明一点，在CSS 规范中，并没有“包含盒子”的说法，更准确的称呼应该是“包含块”（containing block）。这里之所以把它称为盒子，一是为了与其他盒子名称统一，二是称为盒子更形象、更容易理解。
小结：包含盒子 》 行框盒子 》 内联盒子
vertical-align
vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display 值为table-cell 的元素。
换句话说，vertical-align 属性只能作用在display 计算值为inline、inlineblock，inline-table 或table-cell 的元素上。因此，默认情况下，<span>、<strong>、<em>等内联元素，<img>、<button>、<input>等替换元素，非HTML 规范的自定义标签元素，以及<td>单元格，都是支持vertical-align 属性的，其他块级元素则不支持。
inline-block 与baseline（参看《CSS世界》P136）
vertical-align 属性的默认值baseline
在文本之类的内联元素那里就是字符x 的下边缘，
对于替换元素则是替换元素的下边缘。
但是，如果是inline-block 元素，则规则要复杂了：
一个inline-block 元素，如果里面没有内联元素，或者overflow 不是visible，则该元素的基线就是其margin 底边缘；
否则其基线就是元素里面最后一行内联元素的基线。
概念解释完了，下面谈谈主题吧
如何确定行框盒子的baseline？
“行框盒子”的baseline以各个元素中最下面的baseline为基准，就是说谁的baseline在最下面，就以谁的baseline为基准进行对齐
vertical-align为baseline时候的规则
独立看所有vertical-align：baseline的内联盒子的基线位置，将baseline最靠下的做为当前行框的基线。如果某个内联盒子的vertical-align不是baseline，则将其忽略，不作为比较对象。
例如：
<div>
AB
</div>
其中，A和B为inline、inline-block？？？（还有别的吗？）等其中之一
1. 如果A和B都是vertical-align：baseline，则 假想
<div>
A
</div>
基线位置
和
<div>
B
</div>
基线位置
哪个基线更低，就把哪个作为当前行框的基线（baseline）
2. 如果A不是vertical-align：baseline，B是 则 假想
<div>
B
</div>
B的基线位置 就是当前行框的基线（baseline）
确定下当前行框的基线之后，就能确定各内联盒子在垂直方向的位置
例如
当前元素vertical-align：baseline 则 当前元素将会把自己的基线去找当前行框的基线重合
vertical-align为middle时候的规则
当前元素vertical-align：middle 则 当前元素将会把自己的基线偏上（x-height）/2的线去找当前行框的基线重合
vertical-align为top或者bottom时候的规则
vertical-align:top 就是垂直上边缘对齐，具体定义如下：
1. 内联元素：元素的顶部和当前行框盒子的顶部对齐。
2. table-cell 元素：元素的顶padding边缘和表格行的顶部对齐。
具体可以参考 这篇文章 深入理解css之vertical-align
