css中的长度单位

很多css属性都依赖于长度单位来显示各种页面元素,所以就会有许多种方法来度量长度。所有的长度都可以表示为整数或负数。所有长度单位后面都会跟有两字母组成的缩写,表示长度单位。长度单位可以划分为两类:绝对长度单位和相对长度单位。

绝对长度单位

一共有5中绝对长度单位:

   in英寸

   cm厘米

   mm毫米

   pt点:一般,一英寸是72点

   pc派卡:1派卡相当于12点

但是,只有在浏览器知道显示页面的显示器,所用的打印机等设备的具体细节时,这些单位才会真正的起效用。往往显示器的大小和分辨率都会影响显示效果,所以我们往往无法解决这方面的问题,只能寄希望于这些度量相互之间是一致的,即1.0in是0.5in的两倍大。

绝对长度的处理十分麻烦,在现在的显示器中,每英寸的像素数远远高于72,甚至达到120以上。Mac Classic OS中有一个声明,即显示器每英寸有72像素,这个假设在很多浏览器上完全错误,而且,在基于这些系统的许多浏览器上规定,点值多少,相应的像素值就是多少。也就是说24pt就是24像素,8pt就是8像素。这会导致一些文本完全无法看清楚,实在是太小了!

在打印时用绝对单位更有利,因为在此通常会以英寸、点来度量长度

相对长度单位

相对长度单位有em,ex,px。px被定义为相对长度单位,是因为它的大小完全取决于显示设备的分表率

em和ex单位

在css中,em定义为一种给定字体的font-size值。如果一个字体的font-size是14px,那么这个字1em值就是14px。很明显,这个值随着被设定字的大小的改变而改变。

<html>
<head>
    <style type="text/css">
        h1{
            padding-left:2em;
        }
        h2{
            padding-left:2em;
        }
    </style>
</head>
<h1>h1 text</h1>
<h2>h2 text</h2>
</html>

同时,ex所指的是字体中小写x的高度,所以在不同的样式中,即使指定了font-size都为20px,但字体不同就会导致ex不同。但是问题是,现在许多的用户代理的做法是,先得到ex值,取ex值得一半即为em值。这与em的定义完全不符合。但是现在主要是因为计算得到x的高度十分困难,而且很多字体都没有内置ex高度值,所以都为了方便直接设置为em的0.5倍了。

像素长度

像素长度其实很好理解,就是根据占屏幕的像素数量确定一个元素的大小。使用像素数是现在主流设置大小时用的单位。因为像素很适合用于度量图片的大小,因为图片的大小本来就是用像素数表示的,这样同时用像素来描述图片和文字,就能保持文字和图片大小效果难当。

但是它也有缺点,win下IE7之前的用户就无法使用浏览器中的文本大小菜单来调整文本大小了,这可能会是一个问题,当然有可能也是一个好处,如果你一定要保证你的页面效果的话。

单位取舍

现在看起来最好用的还是em和px,这两个比较好的反应出浏览器上的距离,设置起来比较方便,特别是em,它能根据特定情况自行调整。

posted @ 2014-02-28 23:41  胖蝎子  阅读(654)  评论(0编辑  收藏  举报