CSS深入理解之line-height

原文出处：https://blog.csdn.net/muzi187/article/details/79171735

line-height

一、line-height的定义

 

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

1、什么是基线？字符（x）下边缘

2、为什么是基线？基线是*线定义之根本。

3、需要两行么？不需要，两行的定义决定了一行的表现

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

其实并不是真的垂直居中，只是看起来居中。

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

所有内联元素的样式表现都与行内框盒子模型有关！例如浮动的文字环绕效果......

 

<p>这是一行普通的文字，这里有个 <em>em</em> 标签</p>

上面是一行普通的文字，有个em标签。但是却包含了4中盒子。

1、“内容区域”（content area），是一种围绕文字看不见的盒子。“内容区域”（content area）的大小与font-size大小相关。

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

3、“行框盒子”（line boxes），每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”（inline boxes）组成；

4、<p>标签所在的“包含盒子”（containing box），此盒子由一行一行的“行框盒子”（line boxes）组成。

 

了解行内框盒子模型，对理解line-height有什么现实意义？

三、line-height的高度机理

<p>这是一行普通的文字，这里有个<em>em</em>标签</p>

这是一行普通的文字，这里有个em标签。

console.log(document.querySelector("p").clientHeight);//p标签的高度

 

元素高度从何而来？是里面的文字撑开的？不是的。

元素p的高度是由line-height行高决定的

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

Line-height明明是两基线距离，单行文字哪来行高，还控制了高度？

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

（2）行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。只不过正好：内容区域高度（content area）+ 行间距（vertical spacing）= 行高（line-height）

 

内容区域：

（1）内容区域（content area）高度只与字号（font-size）以及字体（font-family）有关，与line-height没有任何关系。

（2）在simsun宋体字体下，内容区域高度等于文字大小值。也就是说，在simsun字体下：font-size + 行间距 = line-height

（3）行间距上下拆分就有了“半行间距”。

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

 

如果行框盒子里面有多个不同行高的内联盒子，高度如何表现？

（1）举例：

<p>这是一行普通的文字，这里有个<em style=”line-height:80px”>em</em>标签</p>

这是一行普通的文字，这里有个em标签。

console.log(document.querySelector("p").clientHeight);//p标签的高度

<p>的高度是80px

<p>这是一行普通的文字，这里有个<em style="line-height:80px;vertical-align:40px;">em</em>标签</p>   <p>的高度为98px

（2）如果行框盒子里面有多个不同行高的内联盒子，高度并不一定等于高度最高的内联元素的高度。

 

含多个行框盒子的包含容器

多行文本的高度就是单行文本高度累加。

 

若行框盒子里面混入inline-block水平元素（如图片），高度如何表现？

四、line-height各类属性值

1、line-height支持的属性值

Normal、<number>、<length>、<percent>、inherit

（1）line-height:normal，默认属性值，跟着用户的浏览器走，且与元素字体关联。

在Chrome浏览器下，微软雅黑的normal值为1.32（字体占据的高度/字体大小）

在Chrome浏览器下，宋体的normal值为1.14

（2）line-height:<number>，使用数值作为行高值。例如：line-height:1.5，根据当前元素的font-size大小计算。假如文字大小（font-size）20px，则行高为1.5*20px=30px

（3）Line-height:<length>，使用具体长度值作为行高值。例如：line-height:1.5em，line-height:1.5rem，line-height:20px，line-height:20pt。

（4）Line-height:<percent>，使用百分比作为行高值。例如：line-height:150%，相对于设置了该line-height属性的元素的font-size大小计算。假设文字大小font-size为20px，则行高值为20px*150%=30px

（5）Line-height:inherit，行高继承（IE8+），例如：input{line-height:inherit;}，input框等元素默认行高是normal，使用inherit可以让文本框样式可控性更强。

2、line-height:1.5，line-height:150%，line-height:1.5em，有什么区别？

（1）line-height:1.5，所有可继承元素根据font-size重计算行高；

（2）line-height:150%/1.5em，当前元素根据font-size计算行高，继承给下面的元素。

3、body全局数值行高使用经验：body{ font-size:14px; line-height:1.5; }

匹配20像素的使用经验，line-height=20px/14px=1.4285714...

body{ font-size:14px; line-height:1.4286; }

五、line-height与图片的表现

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

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

2、消除图片底部间隙的方法

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

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

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

3、小图片和大文字，基本上高度受行高控制

六、Line-height的实际应用

1、实现：大小不固定的图片、多行文字垂直居中

（1）大小不固定的图片垂直居中（近似垂直居中
 

<style>
.box {
	line-height:200px;
	text-align:center;
	background:#eee;
}

.box>img{vertical-align:middle;}
</style>

<div class="box">
	<img src="1.png">
</div>

 

（2）多行文字垂直居中（也是近似垂直居中）
 

<style>
.box {
	line-height:200px;
	text-align:center;
	background:#eee;
}

.box>.text{
	display:inline-block;
	line-height:normal;
	text-align:left;
	vertical-align:middle;
}
</style>

<div class="box">
    <div class="text">
    多行文字水平垂直居中实现的原理跟图片水平垂直居中是一样的，区别在于要把多行文本所在的容器的display水平转换成和图片一样，也就是inline-block，以及重置外部继承的text-align和line-height属性值。
    </div>
</div>