CSS深入理解之line-height

一时失言乱红尘 2022-05-10 12:08 315阅读 0赞

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

# **line-height** #

### 一、**line-height的定义** ###

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

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

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

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

![SouthEast][]

行高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行高决定的

![SouthEast 1][]

**内联元素的高度是由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）大小不固定的图片垂直居中（近似垂直居中

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

[https_blog.csdn.net_muzi187_article_details_79171735]: https://blog.csdn.net/muzi187/article/details/79171735
[SouthEast]: /images/20220510/c361b834c8344b73aeeb9eab5f348165.png
[SouthEast 1]: /images/20220510/c223e7114b6e474b8b62847efd2a69c8.png

CSS深入理解之line-height

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【前端】深入理解CSS定位

相关深入理解css之float

相关 css之clearfix的用法深入理解(必看篇)

相关 CSS-深入理解之margin

相关深入理解css盒子模型

相关 CSS深入理解之line-height

相关【CSS】深入理解CSS浮动布局

相关【CSS布局】深入理解CSS flex布局

相关深入理解CSS盒模型

相关 CSS进阶（5）—— 深入理解margin