深入理解line-height

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;