以前一直没有注意这个属性，现在愈来愈发现其属性重要性。
对于一种技术的掌握，你会选择踏实的掌握每一个细节？还是只想要模糊地一知半解？最后使用的时候再来通过不断地试错来达成目的？
技术不是枪，允许你通过试错的方式实现，你不会因为时间慢了1s而没命；但是，提升效率和准确性，是非常有必要的。
零、先摘录一些 vertail-align 的固有特性
vertical-align 是用来做什么的？
首先，我们要明白 vertical-align 是用来垂直对齐的。接下来的探讨才有意义。
-
1、元素 vertical-align 垂直对齐的位置与前后元素都没有关系
意即是说它不以前后元素的意志为转移；它是一条真理，从出生就在那里。
-
2、元素 vertical-align 与行高 line-height 没有任何关系。
这个需要在不断的实践中得知
-
3、vertical-align 垂直对齐的位置只与 font-size 的大小有关系。
一、先来看一些 vertical-align 导致的怪象抛砖引玉
如上图，都是 inline-block 的元素，为什么会出现高度不齐的问题？明明只是有些元素内写了字而已啊？
解析三部曲：
- 1、vertical-align 的默认值为 baseline —— 它带来的作用是一行内，所有的行内元素(inline)、行内块元素(inline-block)，要根据基线对齐。
- 2、空白的块状行内元素的基线是元素顶端；其他元素的基线位于文本的底部。
- 3、而 vertical-align 的默认值为 baseline。即是根据基线对齐大家都根据基线(但是问题是大家的基线本来就是不相同的)做了对齐。所以造成了这种现象。
其实事情的本质还是大家的基线是不一样的。在座的各位，虽然通过是否是男是女将你们分成了2个团体（也许还会有3个？？），但是用人类来形容你们总是没有问题的。
解决方案:
那么，我们就换一种对齐方式。我们设置 vertical-align: top;
把元素的顶端与行中最高的元素的顶端对齐。
所以我们重新定义元素们的 vertical-align 为 top。top呢，是把元素的顶端 与 行中最高的元素的顶端 对齐。
从上面的例子中，我们可以知道 vertical-align 默认的属性是 baseline（基线对齐）。
二、那么让我们看下它有哪几种属性
可以看下 w3c 官网的东西。
下面我们就来造一些示例把。
本文参考