3、text-top
将盒子的顶端(margin-top边界)与父盒子的文本区域顶端对齐
审查盒子看到margin-top的顶端。
审查文本，看到蓝色区域的上边界就是文本区域顶端。
最终效果就是盒子的顶端与父盒子文本区域顶端对齐。
4、text-bottom
将盒子的底端（margin-bottom边界） 与父盒子的文本区域底端对齐
和text-top类似，不过将子元素的margin-bottom和文本区域的下边界对齐。
5、sub
将子元素盒子的baseline降低，到适当的父盒子的下标位置
子元素的baseline已经确定了，就是margin-bottom下边界，但是父盒子的下标位置太不好理解。。。首先需要了解下标这个概念，我们可以通过<sub>标签为文字添加下标，将<span>中的内容修改为Gg<sub>Gg</sub>，就会有如下效果。
这里就是将元素的margin-bottom下边界和下标的baseline对齐。
6、super
将元素盒子的baseline升高，到适当的父盒子的上标位置。
与sub对应，super提升到上标内容的baseline处，首先通过<sup>标签创建上标。
7、percentage
百分比：升高（正值）或降低（负值）子元素盒子，具体的升高/降低数值由父盒子的line-height的值乘以百分比计算得出。如果百分比为0%，就和vertical-align:baseline一样。
这个是相当好理解的，就相当于子元素盒子的baseline升高或降低，具体数值为百分比乘以父盒子的line-height。
本例中，父盒子的line-height为200px，所以设定25%，元素应该上移50px。
并不是很直观，给它加上一个transform: translate(0, 50px);【相对下移50px】，它又移到那个熟悉的位置了。
8、length
升高（正值）或降低（负值）子元素盒子。值为升高/降低的距离，如果为0，和vertical-align:baseline一样。
以我们最常用的px作为单位，设定vertical-align:50px，效果就和上面百分比为25%（200px*25%=50px）一样了，不做例子了。
五、vertical-align基于line box的不同取值
