关于vertical-align和line-height的一些理解

前几天看flex布局又温习了下css的基础知识，果不其然又扫到了知识盲点，首当其冲的就是vertical-align和line-height。
恩感觉css其实是很有魅力的一个东西，就是你很容易入门自己写点东西出来，但是我敢说这种程度都是伴随着写代码时对一些属性取值的试探，哎这样没有效果？那试试这个。。。要达到对每个属性的表现都了然于胸还是要花些心思的。
先起个头吧，感觉有的地方还是很模糊，慢慢来完善。

vertical-align

先看一下css标准里对于line-height的解释：

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

取值（相对于inline元素）

• baseline
  元素基线与父元素的基线对齐。
• sub
  元素基线与父元素的下标基线对齐。
• super
  元素基线与父元素的上标基线对齐。
• text-top
  元素顶端与父元素字体的顶端对齐。
• text-bottom
  元素底端与父元素字体的底端对齐。
• middle
  元素中线与父元素的小写x中线对齐。
• <length>
  元素基线超过父元素的基线指定高度。可以取负值。
• <percentage>
  同 <length> ,vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

以下两个值是相对于整行来说的：

• top
  元素及其后代的顶端与整行的顶端对齐。
• bottom
  元素及其后代的底端与整行的底端对齐。

如果元素没有基线baseline，则以它的外边距的下边缘为基线。

当我们将图片内容和文字对齐时，默认是下边缘对齐，但是这样往往在下边会多出一个小空白行，这是因为块级元素内部的内联元素默认的垂直对齐方式是基线对齐（基线我的理解是英文字母书写中第三根线的位置（简直词穷==!），于是就会出现一个小空行，它的高度为文字的行高超出文字基线的距离。消除这个小空行的办法如下：

1. 让vertical-align失效
   图片默认是inline水平的，vertical-align对块状水平的元素无感，所以只要让图片由默认的inline变成block就可以了。·

   img{
   	display:block;//默认是inline
   }

2. vertical-align赋其它值，默认是baseline对齐，改成top/middle/bottom即可。

3. 修改line-height的值：

   下面的空隙高度实际上是文字的行高超出文字基线的距离，因此只要行高足够小，行高在基线的上边，自然没有空隙。

4. 父元素设置font-size：0

作为上述内容的扩展，我们可以用vertical-align和和line-height实现任意尺寸的图片垂直居中的效果。

line-height

css标准里对于line-height的解释：

On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element.

On a non-replaced inline element, ‘line-height’ specifies the height that is used in the calculation of the line box height.

在一个块级容器中，如果它包含若干内联元素，则块级元素的line-height指定了内部line-boxes的最小高度。

对于非替代的行内元素，line-height用来计算line box(行内框)的高度。

line-height具有继承性