Vertical-align属性值区分

先简单看一下官方文档上的Vertical-align这些属性值的描述，虽然只有简单的描述，但其实描述的很清楚，但有时只看文字并不能很好的理解其含义。

下面结合代码图说明：
首先，我建造了一个背景颜色为绿色的div盒子，div盒子内容中包含英文字母”XHaxx"、一张考拉的图片和中文“你我他”

然后，分别将Vertical-align的这些属性值，加到图片样式上。为了更好的查看效果，我把字体大小设置为80px，并给盒子设置了上下padding，靠内容撑开盒子，并没有给盒子指定高度。

1. baseline默认值
   

2. super上标，因为垂直对齐上标，所以我写了两个上标元素中包含内容表示上标
   

3. sub下标，因为垂直对齐下标，所以我写了两个上标元素中包含内容表示下标
   

4. top:最高点
   
   top表示和最高点对齐，为啥没对齐？是因为我的div盒子是靠内容和padding撑起来的，当我把padding那行语句注销掉的时候，div盒子就只剩下内容了。就发现：“图片和最上边对齐了”，这里可以理解文字上方有一部分空白的地方也是属于文字的领域，就是我们常说的顶部。
   

5. text-top:父元素字体顶端，当div中只有文字和考拉的图片时，你会发现top和text-top的实现效果是一模一样的。但是你注意到没有，一个是字体顶端，一个是最高元素的顶端。
   
   刚测试vertical-align: top;时候，内容只有字体，那最高的肯定是字体，那我再创造一个最高点不就好啦。为了更好的区分，我用企鹅的照片制造了一个新的最高点。
   

6. bottom和text-bottom，最低点和文字最低点。上面你能理解top和text-top，对此应该也能很快理解这两个。同样，利用企鹅图片，我制造了一个新的最低点。
   

7. middle: 中部，说是中点&#