angualr4.0的项目总结-关于vertical-align的运用和理解

昨天总结了flex弹性布局时关于宽度的问题，牵出了对box-sizeing的进一步的理解，今天就弹一下vertical-align的使用准则和它的一些常用的属性。
之前对于vertical-align的理解很少，当时只是知道只有属于inline或者inline-block的元素设置vertical-align才会起作用，但是对于base-line的基准线这些确实还很模糊。所以就总结一下。
首先我会借鉴一下张鑫旭大神的文章 链接：http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。所以，类似下面的代码就不会起作用：
div{vertical-align:middle;}就不会起作用。

例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

同时要理解vertical-align的这几个属性分别作用的时候和场景。

标红的是经常用的属性，我也是最近从这个项目才用百分比这个属性值的。
可以对比下面这张图对比记忆

其中要注意text-bottom和bottom，text-top和top的区别，其中的区别最主要的还是跟line-height相关。这个可以借鉴张鑫旭大神相关的文章。