CSS笔记——line-height

定义

line-height，行高，两行文字基线之间的距离。

什么是基线？

如上图所示的红线，就是基线。
根据语言、字体不同，基线也会有所差异，汉字的基线就是底线。

line-height可以让单行文本垂直居中？

只是看着像是居中了。

其实并没有居中！！！

line-height属性值

1. line-height : normal

默认由浏览器决定，且与元素font-family有关

2. line-height : <number>

使用数值作为行高值。例如： line-height: 1.5;根据当前元素font-size大小计算

3. line-height : <length>

使用具体长度值作为行高值。例如： line-height: 1.5em / 2rem / 20px;

4. line-height : <precent>

使用百分比值作为行高值。例如： line-height: 150%;相对于设置了该属性的元素的font-size大小计算

应用差别：

简单总结一下：

1. 使用数值，它会根据当前元素的font-size重新计算行高。

2. 使用%和em，它的行高是根据父元素的font-size计算出来的。

经验之谈：

body全局数值行高设置

body { font: 14px/1.4286 'microsoft yahei' ;}

行内框盒子模型

一共分四种：

line-height与内联元素的高度机制

内联元素的高度是由line-height决定的

需要知道的是：

1. 行高由于其继承性，影响无处不在，即使单行文本也不例外；

2. 行高只是幕后黑手，其实决定高度的是内容区域高度和行间距。
   
   

只不过，正好。。。

内容区域高度 + 行间距 = 行高

内容区域高度

1. 内容区域高度只与font-size以及font-family有关；2. 在font-family: 宋体环境下，内容区域高度等于font-size。

如果行框盒子里面有多个不同行高的内联盒子，内联元素高度由谁决定？

由行高最高的盒子决定？ 不完全对

需要考虑vertical-align的值。

如果没有，则确实如此。

line-height与图片

行高不会影响图片实际占据的高度

<p><img src= './1.jpg'>这是Babymetal</p>

可以看到，在图片下方存在空隙。在实际开发中，我们是不需要这个空隙的，怎么消除呢？

消除空隙的方法：

1. 图片块状化 - 无基线对齐
   img { display: block ;}

2. 图片底线对齐
   img { vertical-align: bottom ;}

3. 行高足够小 -基线位置上移
   p { line-height: 0 ;}

line-height实际应用

图片水平垂直居中

(IE8+)容器 {  line-height: 300px ; text-align: center ;}图片 { vertical-align: middele}

多行文本水平垂直居中

(IE8+)容器 { line-height:固定值; text-align: center}文字 { display: inline-block ; line-height: normal ; text-align: left ; vertical: middel ; }

实现原理：

和图片一样，区别在于需要将文本所在容器转换为display: inline-block，然后重置一下line-height、text-align。

文章部分内容总结自：

张鑫旭
视频——“慕课网——CSS深入理解之line-height”

论点与版权所有归原作者所有