line-height学习与总结

一．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的地方。对与这个还会继续再学习，会继续补充或者修改些许内容。