经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 关于line-height的一点看法

查看: 2963|回复: 4

[教程] 关于line-height的一点看法 [复制链接]

phantom　楼主

林小志

荣誉管理 

帖子: 2439
体力: 3085
威望: 25
居住地: 上海市长宁区

发表于 2008-1-28 17:26:38 |显示全部楼层

该内容首发于小志个人博客，如有转摘请注明一下出处，谢谢。

在说说自己的看法前先吧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，然后看看效果。

对上面提到如果大家认为不对的请提一下，交流，共同进步。谢谢。

这里是可以点击的，你会点吗？

西部数码顶级域名注册商39元抢注！

使用道具举报

abamboo　

中级会员

帖子: 229
体力: 491
威望: 0

发表于 2008-1-28 17:57:43 |显示全部楼层

p {text-indent:2em;line-height:1;} = p {text-indent:2em;line-height:100%;}

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

dashzhao　

赵勇

银牌会员 

帖子: 4121
体力: 2375
威望: 2
居住地: 广东省深圳市

发表于 2008-1-28 18:01:53 |显示全部楼层

看小志在天上灰

蓝色理想情感专家恋爱问题

使用道具举报

abamboo　

中级会员

帖子: 229
体力: 491
威望: 0

发表于 2008-1-28 18:05:10 |显示全部楼层

line-height:1em；
这个em应该是相对于p里的，而不应该根据span而改变的吧？
正常情况下p的font-size:14px; line-height:1em=line-height:14px;
而span继承到的只是line-height:14px;
如果用1或2(100%或200%)，那应该没问题了~

使用道具举报