css中的长度单位

浏览数：22 / 时间：2015年06月09日

很多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倍了。