如何确定行框盒子的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