元素的垂直方向对齐，是一个我随便使用的概念，为的是：
表达同一行的元素在垂直方向的对齐方式。
换句话说就是inline或者inline-block元素摆放在同一行时，每个元素在垂直方向上的对齐方式（block元素一个元素就可以占据一行，没必要谈什么在垂直方向的对齐）
由于inline inline block元素的垂直居中是由vertical-align决定的，因此，我们今天就来好好学习一下这个css属性。
vertical align作用于谁呢？
vertical align的默认值是baseline，只能作用域inline 或者inline-block元素对block元素无用
vertical align作用是什么呢？
错误的理解
对于这个问题，我们通常首先会想到的是，在一个大的div中有一个小div，希望这个小div在大div垂直方向的中间。对于这种情况是元素的垂直居中问题，是子元素在父元素中的定位问题.
正确的理解
当vertival-align作用于某一个元素的时候，能够决定该元素和其他在同一行的元素之间垂直方向的对齐方式。
vertical align 的值
根据图中可以看到，当vertical-align设置不同的值的时候，垂直方向对齐的位置应该在哪里。
默认值baseline
如何计算元素的baseline
-
对于一个有内容的inline-block元素：
- 如果该元素
overflow不是visible：baseline是margin底部边缘 - 该元素的
overflow是visible: baseline是其中最后一个inline元素的baseline
- 如果该元素
对于一个没有内容的inline-block元素：
baseline是margin底部边缘对于一个inline元素：
inline元素的baseline计算方式如上图对于img：baseline是margin底部边缘
baseline在不同的设备上出现的问题
对于一个有内容的inline-block元素
-
安卓：
- 如果该元素的
overflow不是visible： 那么该元素的基线一定是该元素margin底部 - 如果该元素的
overflow是visible： 那么该元素的基线就是最后一个inline元素的baseline
- 如果该元素的
ios
他的基线就是最后一个inline元素的baseline，该元素的baseline不会受到overflow的影响
在同一行的所有按照baseline对齐的元素之间又该如何对齐？
在同一行中，会通过比较所有按照baseline对齐的元素的baseline(注意：一定是比较所有按照baseline对齐的元素，如果某个元素按照top对齐那么就不需要比较这个元素的baseline了)找到最低的baseline作为baseline对齐元素的对齐基准。
图中的黄线就是baseline
- 例子：如果此时设置左边的月亮星星图为
veritcal-align：top那么这个元素的baseline就不需要参与比较了
image.png
因此baseline变成了图中的红线
top和bottom
这两个value会比较好理解，当某一个元素被设置了vertical-align是这两个元素之一，那么这个元素就会找到这一行的最高处或者最低处，和自己的最高或者最低处对齐
- 例子
如上图，月亮星星图的veritcal-align是bottom,那么他就是和这一行的最低处对齐
当我把最后一个橘色div的veritcal-align改成bottom之后，整个这一行的最低处就提高了一些，此时月亮星星图以及div都是按照最低处对齐的
middle
将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐
由vertical-align造成的一些问题
img和text在一行的时候，img下留的空白
原因：
- 同一行中的元素，img的
baseline是底部margin边缘，而text的baseline是x下边缘。 - 因此在当前行，图片的baseline作为对齐的基准
- 但是文字本身是有
line-height的
line-height = font-size + 行距
image.png
- 因此留白的高度 = 半行距
解决思路 两种方案：
- 修改对齐方式给img设置
vertical-align: middle -
font-size设置为0
关于第二种方案能解决问题的原因：
line-height和font-size
-
line-height的真正高度=font-size * line-height因此line-height的值一般是倍数
image.png 元素中有三行文字，每一行是一个inlineBox,其高对应的css是line-height
在inlineBox里有一个区域叫做contentArea，这里显示的是文字，其高对应的css是font-size。
浏览器自动将contentArea区域设置在inlineBox区域的垂直居中位置。
- 在默认状况下：
| element | font-size | line-height | line-height value |
|---|---|---|---|
| body | 16px | Normal(1-1.2) | 18px （line-height * font-size） |
- 还有一些使用的窍门，注意通常不要将行高设置成
px为单位可以参考该文档
注意： line-height的值为normal，但是normal的真正value并不是很确定，取决于当前你使用font-family,但是范围都在1-1.2之间
因此，当你将你的font-size设置成0，那么即使你不修改line-height的值，inline-box的高度也会变成0，从而使得行距变成0 就不会出现留白了
