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

line-height学习与总结_height  

line-height学习与总结_height _02

 

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

(1)行高由于继承性,影响无处不在,即使是单行文本也不例外;

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

二,行高的作用

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

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

line-height学习与总结_文本图片_03 

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

     “内容区域”(content area),是一种围绕文字看不见的盒子,大小与字体大小有关;

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

     “行框盒子”(lines boxes),每一行就是一个“行框盒子”,它其实就是包裹每行文字。一行文字一个line boxes     

  line-height学习与总结_height _04

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

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

   在行内框盒子(inline box)模型中,这个(行框盒子)line boxesline 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代码:

 

line-height学习与总结_height _05 

Html代码:

line-height学习与总结_line_06 

实现效果图:

line-height学习与总结_line_07 

若高度固定时:

Css代码;

line-height学习与总结_line_08 

Html 代码:

line-height学习与总结_line_09 

 实现效果图:

line-height学习与总结_line_10 

  (3)图片的水平垂直居中:

        Css代码:

    line-height学习与总结_height _11

Html代码:

  line-height学习与总结_文本图片_12

代码实现效果

line-height学习与总结_文本图片_13 

五,总结

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