深入理解CSS中的line-height的使用

　　什么是line-height(行高)？

　　是指两行文字基线之间的距离。

　　什么是基线？

　　基线、底线、顶线、中线

　　注意：

　　行距、行高

　　line-height 与行内框盒子模型

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

　　什么是行内框盒子模型

　　我们通过下面这段代码进行讲解

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

　　在这段代码中包含了 中盒子：

　　内容区是指底线和顶线包裹的区域（行内元素 可以通过 属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据 的值和字数进行变化。

　　。内联盒子不会让内容成块排列，而是排成一行。如果外部 水平的标签( 、 、 等)则属于 ,如果是光秃秃的文字则属于 。

　　。每一行就是一个 。每个行框盒子又是由一个个 组成。

　　包含盒子。 是由一行一行的 组成。 标签就代表了一个 。(即上图中的绿色部分)

　　line-height 的高度机理

　　深入理解内联元素的高度表现

　　在讲解原理之前，我们先看以下代码:

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

　　console.log(document.querySelector('p').clientHeight); // 输出36px

　　现在我们思考这样几个问题:

　　：元素的高度是由 决定的：

　　明明是两基线之间的距离，单行文字哪来行高，还控制了高度？

　　总结

　　line-height 的各类属性值

　　normal

　　默认属性值，与浏览器相关，且与元素字体相关联。

　　使用数值作为行高，根据当前元素的 大小计算。

　　、 、 使用具体单位作为行高值。

　　使用百分比作为行高值。相对于设置了该 属性的元素的 大小计算。

　　inherit

　　,行高继承。使用 可以让文本框样式可控性更强。 行高默认具有继承性，为什么还是这样做？？？ 的默认行高是 ,而不是继承父级元素的行高。

　　、 、 的区别

　　在计算结果上是相同的，但是所影响的元素有区别。

　　全局数值使用经验

　　如果是 ，已阅读为主的网页， 较为适宜。

　　如果是面向用户，并不是阅读为主的网页，则推荐使用匹配 像素的使用经验。 或者合并形式

　　line-height 与图片高度表现。

　　不会影响图片的高度。

　　隐匿文本节点： 标签是一个文本节点，其默认会有文本。即使 ,也就是当内容为空时，也存在文本节点，只不过看不到而已。这样的节点称其为隐匿文本节点，也正因为隐匿文本节点的存在，才会造成下面图中的情形。

　　如何消除图片与底部之间的间隙？

　　在项目开发中，我们偶尔会遇到以下情形：

　　解决的办法主要有以下三种：

　　1.图片块状化。( )只适用于 元素，也就是说对于 元素并没有基线对齐的说辞。

　　2.图片底线对齐

　　3.行高足够小，使基线上移。

　　line-height的实际应用

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

　　2.实现多行文本水平垂直居中

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。