css中line-height的理解_介绍line-height实际应用

一、line-height的定义

css中line-height行高是指文本行基线之间的距离，不同字体，基线位置不同。line-height只影响行内元素和其他行内内容，而不会直接影响块级元素，如果块级元素设置了line-height，这个值只会应用到块级元素里面的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。

 

二、line-height与行内框盒子模型  

<p>hello world<em>this is em</em></p>

这样一行普通的代码，包含了4种盒子，如下：  

办公资源网址导航 https://www.wode007.com

1.“内容区域”（content area）

围绕文字看不见的盒子，内容区域的高度大小只与font-size的大小和font-family有关，在simsun宋体字体下，内容区域高度等于文字大小。  

 

2.“内联盒子”（inline boxes） 

内联盒子（inline boxes），不会让内容成块显示，而是排成一行。如果外部含inline水平标签，则属于内联盒子；如果是个光秃秃的文字，则属于”匿名内联盒子“。

3.行框盒子（line boxes）

每一行就是一个行框盒子，每一个行框盒子又是由一个个内联盒子组成。  

4.包含盒子（containing box）

由一行行行框盒子组成。  

 

三、line-height与内联元素的高度机理  

关于内容区域高度：①内容区域高度只与字体以及字号有关，与line-height没有任何关系；②在simsun字体下，内容区域高度等于文字大小值。

行的高度不是由于行高造成的。因为：①行高由于其继承性，影响无处不在，即使单行文本也不例外；②行高这是幕后黑手，高度表现不是行高，而是内容区域和行间距。只不过：行间距 = line-height - font-size

行间距一般是上下均分的。

总结：行高决定内联盒子高度；行间距墙头草，可大可小可负值，保证高度正好等同于行高。

 

四、line-height的不同属性值

line-height:normal/<number>/<lenght>/<percent>/inherit;

normal：默认属性值。与浏览器和元素字体相关。因此为了让各个浏览器兼容性一致，要初始化line-height。

<number>：使用数值作为行高值。line-height = number * font-size
<lenght>：使用具体长度值作为行高值。em/rem/px/pt
<percent>：使用百分比作为行高值。line-height = percent * font-size

inherit：行高继承。IE8+

问题：line-height:1.5/150%/1.5em的区别

答：计算无差别。1.5所有可继承元素根据font-size重新计算行高；150%/1.5em当前元素根据font-size计算行高，继承给下面的元素。

body全局数值行高使用经验：

匹配20px使用，为了方便心算：line-height = 20px / 14px = 1.42857

由于chrome是19px，所以body{font-size:14px;line-height:1.4286;}

 

五、line-height实际应用

1、图片水平垂直居中 （ie8+）

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle}

2、多行文本水平垂直居中(ie8+)  

.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block; line-height: nomal; text-align:left;vertical-align:middle;}

3、用line-height代替height，避免ie6/ie7的haslayout

{height:36px;line-height:36px;}

其实可以直接简写成：  

{line-height:36px;}