一直以来对css的vertical-align都是浅尝辄止，只是简单的认为他是用来处理垂直对齐方式的，并没有深入的理解他。直到遇到了一个非常棘手的问题，才发现是vertical-align惹的祸，故而对这个css属性来了一次深入理解。
vertical-align是用来指定行内元素或表格单元格元素的垂直对齐方式，因此他只对inline元素或table-cell元素起作用，对block元素是无效的。
这个属性的属性值非常多，可以通过查阅MDN文档来了解各个属性值的含义，其默认值是baseline，也就是说在没有给vertical-align指定属性值的时候，元素默认是按照基线对齐的。
那么基线的位置怎么确定呢？
字母‘x’的下边缘便是基线的位置，这个想必大家不陌生，这便是inline内联元素确定基线的规则。
接下来是inline-block元素基线的确定规则
- 如果他内部存在inline内联元素且overflow为visible，那么他的baseline就是最后一个内联元素的基线。
- 如果他内部不存在inline内联元素或overflow不为visible，那么他的baseline就是其margin底边缘。
最后父元素的baseline是如何确定的呢？
父元素的基线就是其最后一个行内元素的baseline。