line-height 行高 两行文字基线之间的距离
line-height 与行内框盒子模型
所有内联元素的样式表现都与行框盒子模型模型有关！
1，内容区域 大小与font-size相关
2，内联盒子 不会让内容成块显示
3，行框盒子 每一个行就是一个行框盒子，每个行框盒子又是由每一个内联盒子组成
4， 包含盒子 由一行一行的行框盒子组成
line-height的高度机理
内联元素的高度是由line-height决定的。
内容区域的高度+行间距= 行高。
1，内容区域的高度只与 字号font-size和字体font-family有关。与line-height没有任何关系
2,在simsun字体下，内容区域高度等于文字大小值。
font-size + 行间距 = line-height
半行间距 ： = 行间距/2 （上下拆分）；
多行文本的高度就是单行文本高度累加。
line-height 各类属性值
normal 默认属性值， 跟着用户的浏览器走，且与元素字体关联。
<number> 使用数值作为行高值，例如 line-height:1.5; 根据当前元素的font-size大小计算。
<length> 使用长度值作为行高值。line-height:1.5em;
<percent> 使用长度值作为行高值。line-height:150%; 相当于font-size*150%
inherit 行高继承。IE8+
input {line-height: inherit;}input框等元素默认行高是normal，使用inherit可以让文本框样式可控性更强
/**/ line-height:1.5;line-height:150%;line-height:1.5em; 由什么区别？
计算无差别！！！
应用元素有差别：
1, line-height:1.5 所有可继承元素根据font-size重计算行高。
2，line-height:150%;line-height:1.5em; 当前元素根据font-size计算行高，继承给下面元素。
body全局数值行高使用经验
body { font-size:14px line-height:1.4286; }
body { font: 14px/1.4286 'microsoft yahei' ; }
line-height 与图片的表现
图文混排消除图片底部的间隙，？
1， 图片块状化--无基线对齐。 img {display :block;}
2, 图片底线对齐 img { vertical-align :bottom; }
3, 行高足够小 --基线位置上移 .box { line-height: 0;}
line-height的实际应用
1，大小不固定得到图片、多行文字垂直居中。
图片水平垂直居中
IE8+ .box { line-height :300px; text-align :center ; }
.box >img { vertical-align:middle; }
多行文本水平居中
IE8+ .box { line-height:250px; text-align:center; }
.box > .text { display: inline-block; line-height:normal; text-align:left; vertical-align:middle; max-100%;}
多行文字水平垂直居中实现原理跟图片一样，区别在于需要把多行文字文本所在的容器的display水平转换成和图片一样，也就是inline-block,以及重置外部继承的text-align和line-height属性。
避免IE6/IE7下的haslayout 用line-height代替height;