line-height
在开发时，我们经常用到line-height，如设定height和line-height同样的值实现位置垂直居中；但是line-height有一些很奇特的地方需要我们注意，本文加以总结：
1. line-height的默认值
不同的浏览器不同，但是在chrome和firefox下测到的结果是1.2。
2. line-height的继承特性：
line-height可以有6种值：120%、1.2、20px、inherit、normal、initial。
line-height可以在font进行同font-size一同设置： font： 120px/1.2。
line-height的继承特性比较坑，首先要指出的其具有继承特性，和font-size类似；但是它的继承计算方法因其值的设定不同而大不同。
- 百分比:
如： 120%。 子元素继承的是父元素的fontSize*line-height，而不是120%。
body{font-size: 16px; line-height: 120%;}
h1{width: 400px; font-size: 32px;}
p{width: 400px; font-size: 16px;}
<body>
<h1>What does the size of the font translate to exactly?</h1>
<p>What does the size of the font translate to exactly? What does the size of the font translate to exactly?</p>
</body>
结果：
h1比较拥挤，说明其line-height是16*1.2，而不是120%。
2.数值：
如 1.2， 那么子元素继承的1.2。
把上述代码的120%改成1.2， 得到如下图所示：
h1显示正常，说明h1的line-height为1.2.
3.像素值
如： 20px; 这种情况下和1相同，就不多说了。
vertical-align
对vertical-align一直不是很明白，在使用的时候心里没底，经常出错。今天抽空看了几篇讲解的文章，自己做了个demo，算是初步了解。后续有更加深刻的了解，再补充上。
什么条件下vertical-align生效
- 原生就具有inline或者inline-block属性的元素（table-cell也算），如：图片、按钮、单复按钮、单行/多行文本框等。
- 手动设置为inline-block属性。
- 父元素的行高足够（如果不够，没法正确显示）
vertical-align的基本参数
| 值 | 描述 |
|---|---|
| 长度 | 通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline' |
| 百分值 – % | 通过距离（相对于line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline' |
| baseline | 默认。元素的基线与父元素的基线对齐。 |
| sub | 降低元素的基线到父元素合适的下标位置。 |
| super | 升高元素的基线到父元素合适的上标位置。 |
| top | 把对齐的子元素的顶端与line box顶端对齐。 |
| text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
| middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度对齐。 |
| bottom | 把对齐的子元素的底端与line box底端对齐 |
| text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
| inherit | 采用父元素相关属性的相同的指定值。 |
这里特别要强调的是百分值是基于line-height的。另外这里所说的baseline和我们初学英语字母是所用的四线格相似，如下面的两个图，我们可以对比展示四条在css中很重要的线条:
上图中的蓝线就是baseline；黄线是vertical-align为middle是的中间线，其高度为：baseline+1/2(小写x的高度)；红线是text-top对应的top line；橙色为text-bottom对应的botton line。 程序为：
<html>
<head>
<meta charset="utf-8" />
<title>vertical align</title>
<style>
.line{
position: absolute;
height: 0;
width: 100%;
left: 27px;
border: none;
line-height: 0;
margin: 0;
padding: 0;
}
.line.top{border: 1px solid red; top: 20px;}
.line.middle{border: 1px solid yellow; top: 42px;}
.line.base{border: 1px solid blue; top: 54px;}
.line.bottom{border: 1px solid orange;top: 60px;}
</style>
</head>
<body>
<div class="my" id="my" style="position:relative;">
hgaXx你好
<!--span class="dot"></span -->
<p class="line top"></p>
<p class="line middle"></p>
<p class="line base"></p>
<p class="line bottom"></p>
</div>
<span>x</span>
<p style="line-height:0; border: 1px solid #ccc;">ga</p>
<script>
var _ele = document.getElementById("testImage");
var _myEle = document.getElementById("my");
console.log(_ele.offsetTop);
console.log(_myEle.offsetTop);
</script>
</body>
</html>
