css行高line-height研究

定义

line-height属性设置行间的距离，基线之间的距离，不同字体，基线位置不同。

line-height的属性

normal:默认值，设置合理的行间距，跟浏览器相关。实际开发中，对行高reset,保证各个浏览器的兼容性一致。
number:设置一个数字，则会跟当前的字体尺寸相乘设置行间距。举例:line-height:1.5, 那么实际行高=1.5*font-size 。
有单位的值（px,em,rem):设置固定的行间距。
%：基于当前的字体尺寸的百分比的行间距，100%与1em相同。
inherit：规定应该从父元素继承line-height属性的值

举例：

 <style>  
    .demo1 {
      line-height: 150%;
      font-size: 16px;
      border:1px solid #ddd;

    }
    .demo1 div {
      font-size: 30px;
    }
    .demo2 {
      line-height: 1.5;
      font-size: 16px;
      border:1px solid #000;
    }
    .demo2 div {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="demo1">
    父元素内容
    <div>
        web前端开发<br>
        line-height行高问题
    </div>
</div>  
<div class="demo2">
    父元素内容
    <div>
        前端开发<br>
        line-height行高问题
    </div>
</div>  
</body>

案例解析：

1）demo1总高度为74，父元素行高为150%(1.5em)时，会根据父元素的的字体大小先计算出行高值，然后再让子元素继承。所以当line-height:150%时，子元素的行高等于16px * 150% = 24px; 子元素共有两行，24*3+2

2）demo2总高度为116，当父元素行高为1.5时，会根据子元素的字体大小动态计算行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于30px * 1.5 = 45px; 45+45+24+2

浏览器支持

所有的浏览器都支持line-height属性

作用

line-height会影响行框的布局。在应用到一个块级元素时，它定义了元素中基线的最小距离。

line-height的高度机制原理

内联元素的高度由行高决定
行距 = 内容区域的高度 + 行间距
font-size+行间距 = line-height
多行文本的高度 = 单行文本高度累加

利用行高实现垂直居中

单行文字的垂直居中对齐

把line-height = height

2.多行文字的垂直居中

1）父元素：height = line-height
2）子元素：设置合适的line-height,并且设置display:inline-block，vertical-align:middle
案例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>css居中对齐</title>
 <style>  
    *{padding: 0;margin:0;font-size: 12px;}  
     div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid      
     #ccc; line-height: 200px;}  
     span{display: inline-block;vertical-align: middle;line-height: 22px;}
 </style>
</head>
<body>
  <div>  
     <span>单行文字垂直居中显示</span> 
  </div>  
  <div>  
    <span>多行文字垂直居中显示 <br/> 多行文字垂直居中显示<br/> 多行文字垂直居中显示<br/> 多行 
      文字垂直居中显示<br/> 多行文字垂直居中显示<br/> 多行文字垂直居中显示</span>
  </div>
</body>
</html>

补充：css vertical-align

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值(vertical-align: 4px;vertical-align: 20%;)，这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

注意：

vertical-align属性应该设置到行内或行内块元素上
如果文字的总高度超出了容器的高度，则垂直居中会失效，
IE7以下，span 尾标签和内部内容不能有间隔空白，也就是说span的尾标签和内容要连在一起。