该内容首发于小志个人博客,如有转摘请注明一下出处,谢谢。
在说说自己的看法前先吧
CSS手册中提到的关于
line-height的介绍拿出来。
引用:
line-height版本:CSS1 兼容性:IE4+ NS4+ 继承性:有
语法:
line-height : normal | length
取值:
normal : 默认值。默认行高
length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅 长度单位
说明:
检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。
假如一个格式化的行包括不止一个对象,则最大行高会被应用。在这种情况下,此属性不可以为负值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 lineHeight 。
在上面的这个介绍中提到,
line-height具有继承性,那么也就是说如果在一个页面中p标签中包含了几个span标签,并且每个span标签的文字大小不一样或者一样(反正跟p标签的文字不一样),那span还是同样会继承p标签的
line-height值。
提示:您可以先修改部分代码再运行
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="linxz http://www.linxz.cn" />
<title>无标题文档</title>
<style type="text/css">
* {padding:0;margin:0;}
div {width:350px;height:auto !important;min-height:150px;padding:10px;margin:10px;border:1px solid #f00;}
p {text-indent:2em;line-height:1em;}
span {font-size:30px}
</style>
</head>
<body>
<div>
<h1>测试line-height的值</h1>
<p><span>大雪封路</span>,回不了家了,虽然是难道一见的大雪,我也是难道在出门在外的第一次啊,苍天啊,你就这样对待一个可怜的人啊。过年了啊,要回家了。今年是本命年了,开始衰了,唉~~~才刚刚是<span>2008年奥运</span>开始,我倒霉也要开始吗?</p>
<p>来深圳才这么短的时间,<span>接触了不少人,感悟了不少事</span>,人生啊。唉!!</p>
</div>
</body>
</html>注:
- 这里引用的单位是em,如果需要测试的朋友可以改成px或者%这些常用的单位。
- 文字大小为了区分显示效果,只对span标签做了限制,如果需要测试的朋友可以对p标签的文字改动一下,比如font-size:12px
上面的代码中是对
line-height加上单位后做的效果,然后看一下不加单位的效果。
提示:您可以先修改部分代码再运行
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="linxz http://www.linxz.cn" />
<title>无标题文档</title>
<style type="text/css">
* {padding:0;margin:0;}
div {width:350px;height:auto !important;min-height:150px;padding:10px;margin:10px;border:1px solid #f00;}
p {text-indent:2em;line-height:1;}
span {font-size:30px}
</style>
</head>
<body>
<div>
<h1>测试line-height的值</h1>
<p><span>大雪封路</span>,回不了家了,虽然是难道一见的大雪,我也是难道在出门在外的第一次啊,苍天啊,你就这样对待一个可怜的人啊。过年了啊,要回家了。今年是本命年了,开始衰了,唉~~~才刚刚是<span>2008年奥运</span>开始,我倒霉也要开始吗?</p>
<p>来深圳才这么短的时间,<span>接触了不少人,感悟了不少事</span>,人生啊。唉!!</p>
</div>
</body>
</html>line-height后面的数值加不加单位是完全不同的一个效果。这个又是为什么呢?当时我一直很迷糊,不过多次测试后,发现这个就是像
CSS手册中提到一样,继续性的问题。
总结:
继承性,在
line-height中的数值上加了单位后,那么子标签(就如测试代码中p标签中的span标签)也将继承这个
line-height中的数值。而相对不加单位的
line-height中的数值就如同一个倍数,会对每个标签做相对倍数的处理。如果有用过zoom这个属性的的朋友应该知道,在针对IE6的hack方法中,有时候会用到zoom:1;后面也是不带单位的(具体针对zoom的介绍请参考
CSS手册)。
有兴趣的朋友可以对上面的代码做点小修改,将
line-height:1;这个数字
1改成
2,然后看看效果。
对上面提到如果大家认为不对的请提一下,交流,共同进步。谢谢。