欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

彻底搞懂CSS的line-height属性

最编程 2024-02-15 17:28:52
...

原文链接 CSS深入理解之line-height

line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。

定义三问：

  1. 什么是基线？
  2. 为何是基线？
  3. 需要两行？

如图红色线即为基线

基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！

基线的扩展知识，稍作了解。如图：

第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已经决定了一行的表现！

所以，行高表现为，如下图：（如果试想行高为0，那么两行文字将重合）

问题：为何line-height可以让单行文本垂直居中？

分析：真的垂直居中了吗？实际上并没有，只是我们肉眼看上去垂直居中而已！见下图：

** line-height与行内框盒子模型**

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

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

 这普通的一行包含了4种盒子，下面详解。

1、内容区域(content area)，是一种围绕文字看不见的盒子。内容区域的大小与font-size大小相关。图示如下：

2、内联盒子(inline boxes)，内联盒子不会让内容成块显示，而是排成一行。如果(文字)外部包含inline水平的标签(span、a、em、strong等)，则属于内联盒子。如果是个光秃秃的文字，则属于匿名内联盒子。图示会更清楚：

3、行框盒子(line boxes)，每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成。

4、

标签所在的包含盒子(containing box)，此盒子有一行一行的行框盒子组成。

line-height的高度机理——深入理解内联元素的高度表现

我们来考虑文本占据的高度，见下例：

标签的高度从何而来，是由里面的文字撑开的吗？答案：不是的，实际上这个高度是由line-height决定的！再看下例：

通过此例说明，内联元素的高度是由行高决定的！

line-height明明是两条基线之间的距离，单行文字哪来行高，还控制了高度?

我们需要知道：

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

2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。

只不过，内容区域高度(content area)+行间距(vertical spacing)=行高(line-height)

注意：1、内容区域(content area)高度只与字号(font-size)以及字体(font-size)有关，与line-height没有任何关系。

2、在simsun字体(即宋体)下，内容区域高度等于文字大小值。所以，在simsun字体下，font-size+行间距=line-height。

行间距上下拆分，就有了半行间距。

测试：font-size=240px，line-height=360px，分别计算行半间距。如图：

在simsun字体下，行半间距就是60px了。

总结：

行高决定内联盒子的高度；行间距墙头草，可大可小(甚至负值)，保证高度正好等于行高。行间距为负值时，举例说明，在simsun字体下，如果line-height小于font-size，inline box会优先于行高，以保证inline box的高度正好等于行高。例：font-size: 16px; line-height: 12px; inline box高度为12px。content area会溢出，inline box的顶部和底部半行高会折叠起来，以保证inline box的高度。图示如下：

问题：如果行框盒子里面有多个不同行高的内联盒子?这个时候高度怎么表现?由行高最高的那个盒子决定?

答案：错。看下例：

虽然以上特例说明了正好是由行高最高的那个盒子决定，但是还要看下例：

到此就已经说明问题了。vertical-align是内联元素里面非常深的一个知识，在此不赘述了。

含多个行框盒子的包含容器，多行文本的高度就是单行文本高度的累加。

** line-height各类属性值**——深入理解line-height不同类别值的不同表现

line-height支持的属性值：

  1. normal
  5. inherit(继承)

1、line-height:normal是默认属性值，对应的具体的行高值是跟着用户的浏览器走的，且与元素字体关联。如下例(在chrome浏览器下，在火狐浏览器下可能有偏差)：

改变为宋体：

可见，正是由于normal非常不确定，所以我们在实际网页开发的时候在全局元素里对行高reset，保证兼容性。

2、line-height:，如下例：

3、line-height:

使用具体长度值作为行高值。例如：

  1. line-height:1.5em(相对单位)
  2. line-height:1.5rem(相对单位，不知道rem是？)
  3. line-height:20px(固定单位)
  4. line-height:20pt(固定单位，也不知道pt是？)

4、line-height:，如下例：

5、line-height:inherit，如下例：(比较高级，在此不做深入详解了)

问题：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计算行高，继承给下面的元素。

以下例来说明：

例，line-height:1.5时。

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <title>Document</title>
6. <styletype="text/css">
7.         div {
8.             line-height:1.5;
9.             font-size:24px;
10. }
11.         p {
12.             font-size:60px;
13. }
14. </style>
15. </head>
16. <body>
17. <div>
18. <p>我的font-size<br/>为60px~</p>
19. </div>
20. </body>
21. </html>

可继承元素(

)是重新根据自己的font-size(60px)计算行高的(line-hight=60x1.5=90px)，所以两行行框盒子高度为180px。

例，line-height:150%时。

当前元素(

)根据font-size(24px)计算行高(line-height=24x150%=36px)，继承给下面的元素(

)，所以两行行框盒子高度为72px。

body全局数值行高使用经验

1. body { font-size:14px; line-height:?;}

假如是一种专门以阅读为主的博客，行高至少要1.5或1.6。如果是平时的面向用户的网页开发，匹配20px的使用经验——方便心算。

line-height=20px/14px≈1.42857(1.4...)，那么我们是不是该使用1.42857呢？

1. body { font-size:14px; line-height:1.42857?;}

虽然，IE、火狐都是ok的，但chrome的高度是19px，不是20px。所以，我们使用1.4286。

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

上一篇： 彻底搞懂CSS行高line-height的奥秘

下一篇： 这些被代码检查工具推荐但你可能忽视的CSS特性

推荐阅读