不给line-height加单位要成为一种习惯
2013-06-03 16:01
281 查看
我们都知道line-height是可以继承的,由于这个特性,子元素就可以不用重复定义line-height了。但line-height会给人误解的地方也就是这个继承。这是怎么回事呢?别急,我们先来看一幅图。
看着图一,是不是让你心生“亲切”呢?^_^不过即使不感到亲切,也会觉得眼熟。明眼人一眼就能看出这是line-height导致的,其实这就是line-height好玩的地方。
有的时候,我们为了实现单行文字的垂直居中,会给line-height一个和height相同的固定的值;有的时候,我们为了调整特定的某段文字的行间距,通常会考虑使用百分比或者相对尺寸的em。或许是习惯,于是我们都习惯了line-height是要有单位的。
但,很明显,这些情况下,我们都不需要考虑line-height的继承,所以我们不会发现任何问题。
然而,当你要使用到line-height继承的时候,你会发现原来还有那么多的猫腻藏在其中。比如有这样一个结构(例一):
<style type="text/css">
.test{line-height:150%;}
pre{font-size:30px;}
</style>
<div class="test">
<pre>
第一行
第二行
</pre>
</div>
你会发现这2行字重叠了,问题来了吧。按普通的思维定式来看,由于line-height会被继承,于是pre内部的文字也应该是line-height:150%,所以出现重叠,似乎太过玄乎?
别急,再来看更具体的例子(例二):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<title>line-height属性的继承问题</title>
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<style type="text/css">
body{font-size:14px;}
h3{margin:10px 0;color:#fe5600;font:bold 20px/1.5 arial,helvetica,clean,sans-serif;}
.px-line-height{line-height:15px;}
.em-line-height{line-height:1.5em;}
.percent-line-height{line-height:150%;}
.nounits-line-height{line-height:1.5;}
pre{font-size:30px;}
</style>
</head>
<body>
<h3>line-height:15px</h3>
<div class="px-line-height">
<pre>
传说中的测试
情况为line-height:15px时
</pre>
</div>
<h3>line-height:1.5em</h3>
<div class="em-line-height">
<pre>
传说中的测试
情况为line-height:1.5em时
</pre>
</div>
<h3>line-height:150%</h3>
<div class="percent-line-height">
<pre>
传说中的测试
情况为line-height:150%时
</pre>
</div>
<h3>line-height:1.5</h3>
<div class="nounits-line-height">
<pre>
传说中的测试
情况为line-height:1.5时
</pre>
</div>
</body>
</html>
看过例子后,你会发现,只要有单位的line-height继承,都发生了重叠的现象。那到底这是什么原因导致的呢?
如果line-height属性值有单位,那么继承的值则是换算后的一个具体的px级别的值;而如果属性值没有单位,则浏览器会直接继承这个“因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的
4000
line-height值。
如例一,div的line-height为150%,由于默认情况的字体大小为16px,所以div的具体line-height值可换算为16px*150%=24px,由于pre的line-height会继承24px这个换算过后的具体值,此时pre又被重新定义了font-size:30px;字体大小超过了line-height的大小,于是发生重叠。其它单位原理一样。
而例二中,不带单位的那个line-height,pre由于会直接继承1.5这个因子,所以pre的line-height值为30*1.5=45px;字体大小小于line-height,不会重叠,line-height永远是本身font-size乘以“因子”的倍数。
为了应付各种不可尽知的情况,请习惯不要给line-height单位。
看着图一,是不是让你心生“亲切”呢?^_^不过即使不感到亲切,也会觉得眼熟。明眼人一眼就能看出这是line-height导致的,其实这就是line-height好玩的地方。
有的时候,我们为了实现单行文字的垂直居中,会给line-height一个和height相同的固定的值;有的时候,我们为了调整特定的某段文字的行间距,通常会考虑使用百分比或者相对尺寸的em。或许是习惯,于是我们都习惯了line-height是要有单位的。
但,很明显,这些情况下,我们都不需要考虑line-height的继承,所以我们不会发现任何问题。
然而,当你要使用到line-height继承的时候,你会发现原来还有那么多的猫腻藏在其中。比如有这样一个结构(例一):
<style type="text/css">
.test{line-height:150%;}
pre{font-size:30px;}
</style>
<div class="test">
<pre>
第一行
第二行
</pre>
</div>
你会发现这2行字重叠了,问题来了吧。按普通的思维定式来看,由于line-height会被继承,于是pre内部的文字也应该是line-height:150%,所以出现重叠,似乎太过玄乎?
别急,再来看更具体的例子(例二):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<title>line-height属性的继承问题</title>
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
<style type="text/css">
body{font-size:14px;}
h3{margin:10px 0;color:#fe5600;font:bold 20px/1.5 arial,helvetica,clean,sans-serif;}
.px-line-height{line-height:15px;}
.em-line-height{line-height:1.5em;}
.percent-line-height{line-height:150%;}
.nounits-line-height{line-height:1.5;}
pre{font-size:30px;}
</style>
</head>
<body>
<h3>line-height:15px</h3>
<div class="px-line-height">
<pre>
传说中的测试
情况为line-height:15px时
</pre>
</div>
<h3>line-height:1.5em</h3>
<div class="em-line-height">
<pre>
传说中的测试
情况为line-height:1.5em时
</pre>
</div>
<h3>line-height:150%</h3>
<div class="percent-line-height">
<pre>
传说中的测试
情况为line-height:150%时
</pre>
</div>
<h3>line-height:1.5</h3>
<div class="nounits-line-height">
<pre>
传说中的测试
情况为line-height:1.5时
</pre>
</div>
</body>
</html>
看过例子后,你会发现,只要有单位的line-height继承,都发生了重叠的现象。那到底这是什么原因导致的呢?
如果line-height属性值有单位,那么继承的值则是换算后的一个具体的px级别的值;而如果属性值没有单位,则浏览器会直接继承这个“因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的
4000
line-height值。
如例一,div的line-height为150%,由于默认情况的字体大小为16px,所以div的具体line-height值可换算为16px*150%=24px,由于pre的line-height会继承24px这个换算过后的具体值,此时pre又被重新定义了font-size:30px;字体大小超过了line-height的大小,于是发生重叠。其它单位原理一样。
而例二中,不带单位的那个line-height,pre由于会直接继承1.5这个因子,所以pre的line-height值为30*1.5=45px;字体大小小于line-height,不会重叠,line-height永远是本身font-size乘以“因子”的倍数。
为了应付各种不可尽知的情况,请习惯不要给line-height单位。
相关文章推荐
- 让读书成为一种习惯
- CSS中line-height带单位与不带单位,带何种单位的区别
- 当寂寞不得不成为一种习惯
- 让博客成为一种习惯
- 让读书成为一种习惯
- 转:让读书成为一种习惯
- 让读书成为一种习惯
- 让思考成为一种习惯:一位软件工程专业学生的大学生涯规划
- 想你已经成为了一种习惯
- 当写博客成为一种习惯
- 当被鄙视成为一种习惯,心里也多了一份坦然
- 当寂寞不得不成为一种习惯
- 让博客成为一种习惯
- 使用不带单位的line-height
- 让 Code Review成为一种习惯
- 让记录成为一种习惯
- 坚持应该成为一种习惯
- 让博客成为一种习惯
- 当备份成为一种习惯!
- CSS的单位及css3的calc()及line-height百分比