vertical-align
CSS中的vertical-align用于设置行内块或者行内元素行内元素的对齐方式，似乎使用起来很简单，但使用过程中的坑很多，我个人对于这个属性看了比较多的博客，也有点似懂非懂，以下是我的个人理解以及简要的总结。
定义以及常见属性位置
首先，MDN官方文档给的定义：vertical-align是设置元素的垂直排列的。用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
它的值比较多：baseline| sub| super| top| text-top| middle| bottom| text-bottom| inherit
我们这里只看常用的：
- baseline:使元素的基线与父元素的基线对齐
- middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐
- top：使元素的顶部与其所在行的顶部对齐
- bottom：使元素底部与所在行的底部对齐
按照官方文档的分类：
- baseline与middle，使元素相对其父元素垂直对齐。
- top与bottom，使元素相对整行垂直对齐。
- 以下为行内元素/行内块的顶线、中线、基线、底线所在位置：
top与bottom的元素整行垂直对齐方式
首先要明白什么叫整行。这里的整行指的是几个行内元素、行内块元素所在的那一行，整行的高度由该行最高的元素决定。
对于top与bottom的使用，以下是我的个人理解：
- 首先，我们要找大哥，即该行最高的元素。
- 当我们对大哥使用top与bottom时，因为大哥本就是该行最高的元素了，因此使用这两种对齐方式，该元素不会有任何变化。
- 该行其他元素使用top与bottom时，会依据大哥的顶线和底线来进行对齐。换句话说，只使用top与bottom时，该行排列的参照物就变成了大哥，其他元素相对于大哥进行对齐。
情形1：（box1：top不变位置；box2：top，自动与box1顶线对齐；span：bottom，自动与box1底线对齐。）
情形2：（box1：bottom不变位置；box2：top，自动与box1顶线对齐；span：bottom，自动与box1底线对齐。）
