line-height理解
1.line-height含义
两行文字基线之间的高度距离
2.line-height属性值
2.1简介(normal-number-length-percent-inherit)
.1 normal 默认，跟着浏览器走，且与元素字体关联
.2 number 行高=当前字体尺寸*数字
根据当前元素的font-size大小计算:假设文字大小font-size为20像素，则实际的行高像素值：line-height=1.5*20px=30px;
.3 length 长度值，固定或相对单位皆可
.4 percent 行高=当前字体尺寸*百分比
相对于设置了该line-height属性的元素的font-size大小计算
假设：line-height=150%；文字大小为20px，则行高line-height=150%*20=30px;
.5 inherit 从父元素继承行高。IE8+.
例如：input框等元素默认行高是normal，使用inherit可让文本框样式可控性更强
2.2 使用百分比、em与数值之间的差别
计算无差别
line-height:1.5. 所有可继承元素根据font-size重计算行高；
line-height：150%/1.5em. 当前元素根据font-size计算行高，继承给下面的元素.(父级元素计算行高后继承给子元素)
推荐做法：使用数值.
2.3 body全局数值行高使用经验
body{font-size:14px; line-height:?}
建议：匹配20像素(body默认字体*line-height=20px)的使用，利于心算
line-height=20px/14px=1.42857(14……)
因为chrome浏览器高度匹配出19px，所以使用1.4286
body{font-size:14px; line-height:1.4286;}
缩写形式：body{font-size:14px/1.4286 'microsoft yahei'}
3.line-height与图片表现
1.行高不会影响图片占据的高度
行高和图文混排
图片会和文字基线baseline对齐 ，所以图片下会有缝隙现象存在。
即使没有文字，图片下边缘也还会有空隙。
why？
**“隐匿文本节点” ** 看不见的文字，但实际上是不存在的
line-height会影响容器高度
2.消除图片底部间隙的3种方式
1.图片块状化 img {display:block;}
2.图片底线对齐 img {vertical-align:bottom;}
3.line-height足够小-基线位置上移 .box {line-height:0;}
小图片和大文字 基本上高度受行高控制
4.行高的实际运用
大小不固定的图片,多行文字垂直居中
4.1 图片水平垂直居中
IE8+ .box { line-height:300px; text-align:cneter;} .box>img {vertical-align:middle}
使用middle后，实际上是不能完全垂直居中。基线向上1/2x高度。不同字体在四线中表现不会完全相同，有下沉的和偏上的。
4.2多行文本实现水平垂直居中
IE8+ .box{line-height:250px; text-align:center;} .box>.text { display:inline-block; line-height:normal; text-align:left; vertical-align:middle; max-width:100%; }
多行文字水平垂直居中实现的原理上面图片实现的一样，区别在于文本所在的容器的display水平转换成和图片一样，也就是inline-block，以及重置外部所继承的text-align和vertical-align的值。
4.3 代替height，避免IE6/7下的haslayout
在ie6/7下设置高度，会产生haslayout，冲破父元素的高度。
在ie6/7下设置高度的正确写法：
height:36px;
line-height:36px;
错误写法：
{height:36px; line-height:36px;} 其中的height已经多余了
