以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。
line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度。
定义三问:
- 什么是基线?
- 为何是基线?
- 需要两行?
如图红色线即为基线
基线(baseline),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿。基线乃*线定义之根本!
基线的扩展知识,稍作了解。如图:
第3个问题,一行文字难道就没有行高吗?非也,一行文字也是有行高的,两行的定义已经决定了一行的表现!
所以,行高表现为,如下图:(如果试想行高为0,那么两行文字将重合)
问题:为何line-height可以让单行文本垂直居中?
分析:真的垂直居中了吗?实际上并没有,只是我们肉眼看上去垂直居中而已!见下图:
line-height与行内框盒子模型
所有内联元素的样式表现都与行内框盒子模型有关!例如浮动的图文环绕效果......
<p>这是一行普通的文字,这里有个<em>em</em>标签。</p>
这普通的一行包含了4种盒子,下面详解。
1、内容区域(content area),是一种围绕文字看不见的盒子。内容区域的大小与font-size大小相关。图示如下:
2、内联盒子(inline boxes),内联盒子不会让内容成块显示,而是排成一行。如果(文字)外部包含inline水平的标签(span、a、em、strong等),则属于内联盒子。如果是个光秃秃的文字,则属于匿名内联盒子。图示会更清楚:
3、行框盒子(line boxes),每一行就是一个行框盒子,每个行框盒子又是由一个一个内联盒子组成。
4、<p>标签所在的包含盒子(containing box),此盒子有一行一行的行框盒子组成。
line-height的高度机理——深入理解内联元素的高度表现
我们来考虑文本占据的高度,见下例:
<p>标签的高度从何而来,是由里面的文字撑开的吗?答案:不是的,实际上这个高度是由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支持的属性值:
- normal
- <number>
- <length>
- <percent>
- inherit(继承)
1、line-height:normal是默认属性值,对应的具体的行高值是跟着用户的浏览器走的,且与元素字体关联。如下例(在chrome浏览器下,在火狐浏览器下可能有偏差):
改变为宋体:
可见,正是由于normal非常不确定,所以我们在实际网页开发的时候在<body>全局元素里对行高reset,保证兼容性。
2、line-height:<number>,如下例:
3、line-height:<length>
使用具体长度值作为行高值。例如:
- line-height:1.5em(相对单位)
- line-height:1.5rem(相对单位,不知道rem是?)
- line-height:20px(固定单位)
- line-height:20pt(固定单位,也不知道pt是?)
4、line-height:<percent>,如下例:
5、line-height:inherit,如下例:(比较高级,在此不做深入详解了)
问题:line-height:1.5、line-height:150%、line-height:1.5em有什么区别?
答案:从计算上来讲,是没有任何差别的。但应用元素有差别:
- line-height:1.5:所有可继承元素根据font-size重计算行高。
- line-height:150%/1.5em:当前元素根据font-size计算行高,继承给下面的元素。
以下例来说明:
例,line-height:1.5时。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
line-height: 1.5;
font-size: 24px;
}
p {
font-size: 60px;
}
</style>
</head>
<body>
<div>
<p>我的font-size<br/>为60px~</p>
</div>
</body>
</html>
可继承元素(<p>)是重新根据自己的font-size(60px)计算行高的(line-hight=60x1.5=90px),所以两行行框盒子高度为180px。
例,line-height:150%时。
当前元素(<div>)根据font-size(24px)计算行高(line-height=24x150%=36px),继承给下面的元素(<p>),所以两行行框盒子高度为72px。
body全局数值行高使用经验
body { font-size: 14px; line-height: ?; }
假如是一种专门以阅读为主的博客,行高至少要1.5或1.6。如果是平时的面向用户的网页开发,匹配20px的使用经验——方便心算。
line-height=20px/14px≈1.42857(1.4...),那么我们是不是该使用1.42857呢?
body { font-size: 14px; line-height: 1.42857 ?; }
虽然,IE、火狐都是ok的,但chrome的高度是19px,不是20px。所以,我们使用1.4286。
body { font-size: 14px; line-height: 1.4286; }
line-height与图片的表现——深入探讨行高和图片的样式表现
行高会不会影响图片实际占据的高度?