作家
登录

使用不带单位的line-height

作者: 来源:www.28hudong.com 2012-11-19 17:36:51 阅读 我要评论

有的时候,我们为了实现单行文字的垂直居中,会给line-height一个和height相同的固定的值;有的时候,我们为了调整特定的某段文字的行间距,通常会考虑使用百分比或者相对尺寸的em。或许是习惯,于是我们都习惯了line-height是要有单位的。这些情况下,我们都不需要考虑line-height的继承,也不会发现任何问题。当然我们在使用line-height继承的时候,就会发现问题的所在。 例如下面的代码: CSS: 复制代码代码如下: <style> .line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } .line-height-test span { font-size: 30px; font-weight: bold; } </style> HTML: 复制代码代码如下: <p class="line-height-test"> <span>白培铭先生于1960年出生于中国台湾,毕业于中国台湾省清华大学核物理系,</span> 之后留学于美国加州大学伯克利分校和密西根大学,获得双硕士学位。在工作之后,凭着对营销领域的浓厚兴趣,他又考入密执安大学深造。 </p> 如果line-height属性值有单位,那么继承的值则是换算后的一个具体的px级别的值(先计算后继承);而如果属性值没有单位,则浏览器会直接继承这个 “因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值(先继承后计算)。 比如有一div及子元素p,div的line-height为150%,由于默认情况的字体大小为16px,所以div的具体line-height值可换算为 16px * 150% = 24px,由于p的line-height会继承24px这个换算过后的具体值,此时p又被重新定义为font- size:30px;字体大小超过了line-height的大小,于是发生重叠。其它单位原理一样。

  推荐阅读

  IE兼容css3圆角的实现代码

让我们弃新技术不用,是不可能的,因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角: 下载一个压缩包ie-css3.htc,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Con>>>详细阅读


本文标题:使用不带单位的line-height

地址:http://www.17bianji.com/kaifa2/CSS/16491.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)