line-height学习与总结

Posted 2020-06-17

一．CSS中，line-height被用来控制行与行之间垂直距离，指两行文字基线之间的距离（baseline）,借用一张图来说明什么是基线，以及行高的定义：下图两条红线的距离，如下图：

 

 

而对于单行文本的行高：慕课网上张鑫旭老师是这样解释的：

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

（2）行高是真正的幕后黑手，高度表现不是行高，而是由内容区域与行间距决定，而正好，内容区域+行间距=行高。因此，单行文本行高就是这样定义的。

二，行高的作用

      行高决定内联盒子的高度。

     （1）内容区域+行间距=行高，内容区域高度（如蓝色区域的高度），由字体及字号决定，与行高无关，行间距（蓝色区域与黑色边框的距离）=（行高-内容区域高度）/2就是上下行间距，如图9：

 

（2）line-height与行内框盒子模型有关

     “内容区域”（content area），是一种围绕文字看不见的盒子，大小与字体大小有关；

     “内联盒子”（inline boxes），让内容排成一行的作用，如果有外部含inline水平的标签（span,a,em,strong等），则属于“内联盒子”，如果只是光秃秃的文字，则属于“匿名内联盒子”；

     “行框盒子”（lines boxes），每一行就是一个“行框盒子”，它其实就是包裹每行文字。一行文字一个line boxes。     

  

所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

行内框盒子对理解line-height有什么帮助呢？

   在行内框盒子（inline box）模型中，这个（行框盒子）line boxes，line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。Line boxes其实是由它里面的内联盒子里的文字啊，图片等等，谁最高就决定，高度值就是谁。    

三．line-height的属性值：

 

1.body{line-height:normal;}

 

2.body{line-height:inherit;}

 

3.body{line-height:120%;}

 

4. body{line-height:25px;}

 

5.body{line-height:1.2}

四．Line-height的应用：

（1）单行文本垂直居中，不用设置高度，而只需设置line-height 的值。若是有固定高度，则让行高等于高度值，就可以实现单行文本垂直居中。

（2）对于多行文本，没必要使用line-height，使用padding来更方便，让其父容器不固定高度。设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。若高度固定，用一个span标签将所有的文字封装起来，设置文字display属性（inline-block属性）,并把line-height的高度与height的高度设置一样，就可以完成垂直居中。实现代码：

父容器高度不固定时：

 Css代码：

 

 

Html代码：

 

实现效果图：

 

若高度固定时：

Css代码;

 

Html 代码：

 

 实现效果图：

 

  （3）图片的水平垂直居中：

        Css代码：

    

Html代码：

  

代码实现效果

 

五，总结

     这是自己学习line-height的总结，以及自己在实际中长用到line-height的地方。对与这个还会继续再学习，会继续补充或者修改些许内容。