浅谈line-height 在各浏览器中的特性

通过阅读本文你将了解到line-height的五种定义方法及在各浏览器中的特性与最佳定义方法。

首先看2个问题:

1)line-height和font-size 有联系吗,什么联系?

2)line-height的继承特性有什么特殊性?

如果你对这2个问题很清楚的话,你可以跳过本文。

首先看看w3c的解释:line-height 属性设置行间的距离(行高,行间距)。

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。什么是基线(baseline)?在我之前的一篇文章中已经给出了一个地址,如果不太清楚的话,可以去看看。一个重要的特性就是line-height可以被继承。

浏览器的默认值不一样

各个浏览器的默认值不一样(在1~1.2),所以我们看到的行高都不一样,也是由于这个原因,一般网站都有reset。

line-height有5种定义方式

1)div{line-height:nomal}就是默认的形式,不太推荐这种方式,因为各个浏览器都不一样,会有差异,firefox大概是34px。oprea大概是30px。

2)div{line-height:inherit}继承的方式,就是继承父级元素的形式,不定义的默认值,也不推荐这种方式。

3)div{line-height:150%} 百分比的形式,比较的灵活。/*基于当前字体尺寸的百分比行间距*/

4)div{line-height:20px} 长度的形式,关于常见的一些CSS中的长度单位,后面我将讲述一下。

5)div{line-height:1.5} 纯数字的方式,我推荐的方式,能适应各种。

关于继承特性

1)百分比的继承:继承下来的元素会忽略font-size的大小,都是用同一值。如下图所示:
点击在新窗口中浏览此图片

代码如下:

<!DOCTYPE HTML>

<html >

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<style type="text/css">

        * { margin:0; padding:0 }

        #doc { width:990px; margin:0 auto; margin-top:50px;font:12px/150% arial; }

        #doc h4 { border-bottom:1px solid #000;font-size:30px; }

        #test{font-size:20px;}

        p{font-size:26px}

</style>

<title>line-height的研究</title>

</head>

<body >

<div id="doc">

<h4>line-height的实践</h4>

<div id="test">从目前的形式来看,HTC进军国内行货手机市场绝不是玩票,2011刚开年,就接连不断地推出新机,

并且还都是原生Android 2.2的机器,再加上几款运营商定制机型,可以说产品覆盖率非常的高。</div>

<p>今天,我们再次拿到这款2010下半年炙手可热的HTC“野火”,行货今非昔比</p>

</div>    

</body>

</html>



2)长度的继承:长度是一个绝对值,同样的,继承下来的元素会忽略本身的font-size的大小的。这个可以将上面的例子150%换成18px,效果和上面一样。

3)默认值的继承:这里和前面的方式有点不一样,后面的元素不会忽略font-size的大小,而是基于font-size的大小来计算高度的。我是用firefox3.6测试的,各个元素的font-size的大小不一样,基本上各行文字不再重叠在一起了。后来我用firebug看了下各行的高度,h4是40px,#test是54px(由于是在2行排列的),但是p是35px,我用了chrome10测试了下,h4是40px,#test是46px,p是30px。这2个浏览器就表现不一样了。可见这个方式不是一个好的方式,会带来浏览器的差异。

4)数字的方式:这是对继承方式的一个加强,后面的元素会根据font-size的大小来计算高度的,系数就是这个数字,可见这个在所有的浏览器中都是一样的,可以将

上例子中的150%换成1.5试试。

line-height与行盒(line box)的高度

首先看看height与line-height吧,如果对同一个div修饰的话,height指的是整个div的高度,而line-height应该指的是div中一行间距(两行文字的baseline之间的距离),要理解这个东西,必须要理解半行间距,先看一个例子:

<!DOCTYPE HTML>

<html >

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<style type="text/css">

        * { margin:0; padding:0 }

        #doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial;height: }

        #doc h4 { border-bottom:1px solid #000;font-size:30px; }

        .test{font-size:20px;line-height:30px}

</style>

<title>line-height的研究</title>

</head>

<body >

<div id="doc">

<h4>line-height的实践-半行间距</h4>

<div class="test">研究半行间距的问题abcdefg</div>

</div>    

</body>

</html>



在以.test为class这行文字中。line-height:30px font-size 是20px。其实可以看做文字的高度,那么在文字上到顶部,文字下到底部就是半行间距, 很明显,如果在添加一行文字的话,上一行文字的底部半行间距到下行文字的顶部半行间距加上font-size的大小刚好是line-height的高度,其实也就是2行的baseline的高度。

这个例子中也很明显的看出了line-height和font-size的区别。

line-height小于font-size怎么办?

从上面的例子也可以看出,line box的优先级高,以line box为主。由于line-height是决定line box的一个很重要因素,每一行的文字将根据line-height的取值,决定最后的line box的高度。

line-height 特性
垂直居中,为什么会垂直居中呢?如上面所讲的,两行baseline之间的距离包括上半行间距和下半行间距,这个就组成一个line-height。从整体上来算的话,上和下应该是一样的,试想下如果上下不相等,那该是什么样子的呢?可能可控,可以调节。但是目前没有。从美学的观点来看,今后也不会有,所以上和下半行间距是一样大小的。这就构成了垂直居中。

利用垂直居中的特性:我们可以做当行文字的居中,多行的文字居中。图片居中等等。。

标题,段落与行高的关系
一般的情况下标题用1.2 ,段落至少用1.5(在万维网内容可存取性指南2.0版有叙述)

总结
本文讲述了line-height的定义的5种方式,然后结合line-height的继承特性 ,分析了各种继承特性的问题,最后得出了使用数字来表示的正确和可取性。本文比较了line-height和font-size的区别,从半行间距的的分析入手,总结了line-height的垂直居中特性以及基于这个特性的应用例子。同时也分析了font-size大于line-height怎么办的优先级问题。

相关文章

此处评论已关闭