请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 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值。

 提示:您可以先修改部分代码再运行

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="Author" content="linxz http://www.linxz.cn" />
  6. <title>无标题文档</title>
  7. <style type="text/css">
  8. * {padding:0;margin:0;}
  9. div {width:350px;height:auto !important;min-height:150px;padding:10px;margin:10px;border:1px solid #f00;}
  10. p {text-indent:2em;line-height:1em;}
  11. span {font-size:30px}
  12. </style>
  13. </head>

  14. <body>
  15. <div>
  16.         <h1>测试line-height的值</h1>
  17.         <p><span>大雪封路</span>,回不了家了,虽然是难道一见的大雪,我也是难道在出门在外的第一次啊,苍天啊,你就这样对待一个可怜的人啊。过年了啊,要回家了。今年是本命年了,开始衰了,唉~~~才刚刚是<span>2008年奥运</span>开始,我倒霉也要开始吗?</p>
  18.         <p>来深圳才这么短的时间,<span>接触了不少人,感悟了不少事</span>,人生啊。唉!!</p>
  19. </div>
  20. </body>
  21. </html>
复制代码

注:
  • 这里引用的单位是em,如果需要测试的朋友可以改成px或者%这些常用的单位。
  • 文字大小为了区分显示效果,只对span标签做了限制,如果需要测试的朋友可以对p标签的文字改动一下,比如font-size:12px


上面的代码中是对line-height加上单位后做的效果,然后看一下不加单位的效果。

 提示:您可以先修改部分代码再运行

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="Author" content="linxz http://www.linxz.cn" />
  6. <title>无标题文档</title>
  7. <style type="text/css">
  8. * {padding:0;margin:0;}
  9. div {width:350px;height:auto !important;min-height:150px;padding:10px;margin:10px;border:1px solid #f00;}
  10. p {text-indent:2em;line-height:1;}
  11. span {font-size:30px}
  12. </style>
  13. </head>

  14. <body>
  15. <div>
  16.         <h1>测试line-height的值</h1>
  17.         <p><span>大雪封路</span>,回不了家了,虽然是难道一见的大雪,我也是难道在出门在外的第一次啊,苍天啊,你就这样对待一个可怜的人啊。过年了啊,要回家了。今年是本命年了,开始衰了,唉~~~才刚刚是<span>2008年奥运</span>开始,我倒霉也要开始吗?</p>
  18.         <p>来深圳才这么短的时间,<span>接触了不少人,感悟了不少事</span>,人生啊。唉!!</p>
  19. </div>
  20. </body>
  21. </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元抢注!
帖子
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

使用道具 举报

赵勇

银牌会员 手机认证 

帖子
4121
体力
2375
威望
2
居住地
广东省 深圳市
发表于 2008-1-28 18:01:53 |显示全部楼层
看 小志  在天上灰

使用道具 举报

帖子
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%),那应该没问题了~

使用道具 举报

mxclion

银牌会员 手机认证 

帖子
825
体力
1488
威望
0
居住地
河南省 洛阳市
发表于 2008-1-28 21:21:45 |显示全部楼层
试了下...如果用上单位..那就继承那个数值...

 提示:您可以先修改部分代码再运行



如果不加的话..怎么说呢....
看效果..

效果1(还是小志的那个..就改变了下行高):

 提示:您可以先修改部分代码再运行



效果2(中间添加了点东西...):

 提示:您可以先修改部分代码再运行



从效果中看出..不加单位一行包括了行内元素字体的高度
而加了单位的就相当与定值了...

表达的不是很清楚...不过看效果应该能明白了.
个人见解
不在放荡中变坏,就在沉默中变态...

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 09:15 , Processed in 0.090872 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部