很多CSS属性（如外边距）都依赖于长度度量来适当地显示各种页面元素。因此，CSS 中有很多度量长度的方法不足为奇。
所有长度单位都可以表示为正数或负数，其后跟有一个标签（不过有些属性只接受正数）。另外还可以使用实数，也就是有小数部分的数，如10.5或4.561。所有长度单位后面都有一个两字母缩写，它表示所指定的具体长度单位，如in (英寸）或pt (点）。这个规则只有一个例外，这就是长度为0（零）时，其后不需要跟单位。
这些长度单位可以划归为两类：绝对长度单位和相对长度单位。
绝对长度单位
首先来介绍绝对长度单位，因为它们最容易理解（尽管在Web设计中几乎很少使用绝对长度单位）。有5种绝对长度单位，如下：
英寸<in>
可以想见，这种记法是指美国尺子上都有的单位：英寸（在全世界都使用米制体系的今天，规范中居然还有这个单位，这是一个很有意思的现象，由此可以看出美国对Internet的影响之大，不过现在还是不要介入这些社会问题吧）。
厘米（cm）
这是指全世界尺子上都有的单位：厘米。1英寸是2.54厘米，1厘米等于0.394英寸。
毫米（mm）
对于不想用米制的美国人来说，10毫米等于1厘米，所以1英寸等于25.4毫米，1 毫米等于0.0394英寸。
点（Pt）
点是一个标准印刷度量单位，在打印机和打字机上已经使用了数十年，另外字处理程序使用点作为度量单位也有很多年了。以往，一英寸是72点（点是米制体系广泛使用之前定义的）。因此，如果文本的首字母设置为12点，这就是1英寸的1/6高。例如，p{ font-size: 18pt;}等价于p{font-size: 0.25in;}。
派卡（pc）
派卡（Pica）也是一个印刷术语。1派卡相当于12点，这意味着，6派卡等于1英寸。如上所示，如果文本的首字母设置为1派卡，这应当是1英寸的1/6高。例如，对于前面定义点时给出的示例声明，p{font-size: 1.5pc;}会把文本设置为与上例大小相同。
可以想见，这种记法是指美国尺子上都有的单位：英寸（在全世界都使用米制体系的今天，规范中居然还有这个单位，这是一个很有意思的现象，由此可以看出美国对Internet的影响之大，不过现在还是不要介入这些社会问题吧）。
厘米（cm）
这是指全世界尺子上都有的单位：厘米。1英寸是2.54厘米，1厘米等于0.394英寸。
毫米（mm）
对于不想用米制的美国人来说，10毫米等于1厘米，所以1英寸等于25.4毫米，1 毫米等于0.0394英寸。
点（Pt）
点是一个标准印刷度量单位，在打印机和打字机上已经使用了数十年，另外字处理程序使用点作为度量单位也有很多年了。以往，一英寸是72点（点是米制体系广泛使用之前定义的）。因此，如果文本的首字母设置为12点，这就是1英寸的1/6高。例如，p{ font-size: 18pt;}等价于p{font-size: 0.25in;}。
派卡（pc）
派卡（Pica）也是一个印刷术语。1派卡相当于12点，这意味着，6派卡等于1英寸。如上所示，如果文本的首字母设置为1派卡，这应当是1英寸的1/6高。例如，对于前面定义点时给出的示例声明，p{font-size: 1.5pc;}会把文本设置为与上例大小相同。
当然，只有当浏览器知道用来显示页面的显示器，所用的打印机或其他任何用户代理的所有细节时，这些单位才真正有用。在一个Web浏览器上，显示会受显示器的尺寸影响，另外所设置的显示器分辨率也会有影响——作为创作人员，对于这些因素你往往无计可施。你只能希望（如果没有别的想法）这些度量相互之间要一致，也就是说，设置为1.0in将是0.5in的两倍大。
处理绝对长度
如果一个显示器的分辨率设置为1,024像素X768像素，其屏幕大小为14.22英寸宽、10.67英寸高，而且显示区完全覆盖整个屏幕，那么每个像素的宽和高都为1英寸的1/72。可以预料，这种情况非常非常少见（你见过哪个显示器的大小是这样的？）。所以，在大多数显示器上，每英寸的实际像素数（ppi）都高干72，有时还会高很多，达到120ppi 甚至更高。
作为一个Windows用户，你可以设置显示驱动程序，使元素的显示完全对应于实际度量。可以试一下，单击开始一设置一控制面板。在控制面板中双击“显示”，单击“设置”页，再单击“高级”，可以看到一个对话框（不同PC上的对话框可能不同）。应该能看到标有“字体大小”的一部分，选择“其他”，然后拿把尺子贴到屏幕上，移动滚动条，直到屏幕上的尺子与真正的尺子完全一致。单击OK按钮，退出对话框，设置完成。
如果你使用的是一个Mac Classic操作系统，那么在操作系统中无法设置这个信息，Mac Classic OS (即OS X之前的所有版本）对于屏幕上像素和绝对度量之间的关系有一个假设，它声明显示器每英寸有72像素。这个假设完全是错误的，不过它内置在操作系统中，因此无法避免。所以，在许多基于Classic Mac的Web浏览器上，点值是多少，相应的像素值就是多少：24pt文本就是24像素高，8pt文本则是8像素高。遗憾的是，这实在太小了，以至于往往看不到。图4-4展示了这个问题。
在OS X中，内置的假设ppi值与Windows的内置值很接近：96ppi。这也不见得有多正确，不过至少与Windows计算机一致。
Classic Mac显示问题作为一个例子很好地说明了设置Web页面时为什么要避免使用点。在浏览器显示方面，em、百分数甚至像素都比点要好。
注意：从面向Macintosh的Internet Explorer 5和基于Gecko的浏览器（如Netscape 6+）开始，浏览器本身包含了一个首选项设置来设置ppi值，可以选择标准Macintosh分辨率72ppi,常用的Windows分辨率96ppi,或者是适合你的显示器的ppi分辨率。最后这种选择类似干前面介绍的Windows设置，也就是用一个滑动尺与真正的尺子比较，从而使显示器与真实世界中的实际距离完全一致。
暂不考虑我们看到的，下面做一个可能性不大的假设，假设你的计算机相当了解其显示系统，可以准确地再现真实世界的度量。在这种情况下，通过声明p{margin-top: 0.5in;}可以确信每个段落的上边距都是半英寸。不论字体大小，也不管任何其他情况，段落的上边距都是半英寸。
绝对单位在定义打印文档的样式表时更为有用，在此通常会以英寸、点和派卡来度量长度。可以看到，在Web设计中试图使用绝对度量往往不是最佳的做法，所以下面来看一些更有用的度量单位。
相对长度单位
相对单位之所以得名，是因为它们是根据与其他事物的关系来度量的。所度量的实际(或绝对）距离可能因为不在其控制之下的其他因素而改变，如屏幕分辨率、可视区的宽度、用户的首选项设置，以及很多其他方面。另外，对于某些相对单位，其大小几乎总是对应于使用该单位的元素，因此会因元素的不同而不同。
共有3种相对长度单位：em、ex和px。前两个单位代表“em-height”和“x-height”，这是常用的印刷度量单位，不过，如果你很熟悉印刷术语，会发现在CSS中它们有另外的含义。最后一种长度单位是px,这代表“像素”。如果仔细査看屏幕，一个像素就是你在计算机显示器上看到的一个点。这个值被定义为相对单位，因为它取决于显示设备的分辨率，稍后将介绍这个内容。
em和ex单位
首先我们来考虑em和ex。在CSS中，1个“em”定义为一种给定字体的font-size 值。如果一个元素的font-size为14像素，那么对于该元素，1em就等于14像素。
显然，这个值可能随元素的不同而不同。例如，假设一个h1的字体大小为24像素，一个h2元素的字体大小为18像素，还有一个段落的字体大小为12像素。如果将所有这三个元素的左边距都设置为1em，那么它们的左边距就分别为24像素、18像素和12像素：
h1 {font-size: 24px;}
h2 {font-size: 18px;}
p {font-size: 12px;}
h1, h2, p {margin-left: 1em;}
small {font-size: 0.8em;}
<h1>Left margin =<small>24 pixels</small></h1>
<h2>Left margin =<small>18 pixels</small></h2>
<p>Left margin =<small>12 pixels</small></p>
另一方面，在设置字体的大小时，em的值会相对于父元素的字体大小改变。
与此不同，ex是指所用字体中小写x的高度。因此，如果有两个段落，其中文本的大小为24点，但是各段使用了不同的字体，那么各段相应的ex值可能不同。这是因为，不同字体中x的高度可能不同，如图4-6所示。尽管这些例子的文本都使用了24点——相应地它们的em值都是24点——但是x的高度却各不相同。
em和ex的实际问题
当然，上述所有解释都只是理论上的。前面只是指出了可能会发生什么，但是在实际中，很多用户代理的做法是：取em的值，再取其一半作为ex值。为什么呢？显然，大多数字体都没有内置ex高度值，而且计算这个值相当困难。由于大多数字体的小写字母都是相应大写字母高度的一半，所以可以方便地假设1ex等于0.5em。
一些浏览器（包括面向Mac的Internet Explorer 5）会在内部显示一个小写的x，并计算相应的像素值来确定其高度与此字符font-size值之比，从而试图确定给定字体的x高度。这不是一个最佳的方法，但是这比简单地假设lex等于0.5em好多了。作为使用CSS的人来说，我们可以相信，随着时间的推移，更多的用户代理都会开始使用ex 的实际值，那种取em的一半作为ex的简便做法会逐渐淡出历史。
像素长度
从表面来看，像素很直接。如果仔细地查看一个显示器，你会看到，它被划分成一个由小框组成的网格。每个框就是一个像素。如果将一个元素的高和宽定义为某个像素数，如以下标记所示：
遗憾的是，使用像素有一个潜在的缺点。如果按像素设置字体大小，那么Windows平台Internet Explorer (IE7之前）的用户将无法使用其浏览器中的“文本大小”菜单调整文本的大小。如果文本太小，用户无法很好地阅读，这可能就存在问题了。如果使用更灵活的度量，如em，用户就能调整文本的大小（如果你过于保护你的设计，当然也可以说这才是一个缺点）。
另一方面，非常适合用像素来度量图像大小，因为图像的高度和宽度本身就是像素数。实际上，只有一种情况下你可能不想用像素来表示图像大小，这就是在你希望图像能随文本的大小缩放时。这是一种不错的办法，有时也很有用，如果你用的是基于向量的图像而不是基于像素的图像，就很适合采用这种办法[由于采用了可缩放向量图形（Scalable Vector Graph1cs），将来在这方面还会有更多内容。
像素理论
那么为什么像素定义为相对长度呢？我已经解释过，显示器上的小色框是像素。不过，多少个这样的色框等于一英寸呢？这个问题看上去可能不合逻辑，不过暂容我来解释。
在讨论像素时，CSS规范建议如果一个显示类型的设置与96ppi截然不同，用户代理应当把像素度量缩放为一种“参考像素”。CSS2建议将90ppi作为参考像素，不过CSS2.1 则建议采用96ppi，这是Windows机器常用的度量，而且也被诸如Safari等现代Macintosh 浏览器所采纳。
一般来讲，如果你做了如下声明：font-size: 18px, Web浏览器几乎总会在显示器上使用实际像素——毕竟，显示器上已经有像素——不过，如果采用其他显示设备（如打印机用户代理就必须将像素长度重新缩放为更合理的度量。换句话说，打印代码必须确定一个像素有多少个点，为此，它可能要使用96ppi参考像素。
警告：关于像素度量存在一些问题，在较早的CSS1实现中就可以看到这些问题的一个例子。在 Internet Explorer 3.x中，当打印一个文档时，IE3认为18px就等于18点，而在一个600dpi 的打印机上，则是一英寸的18/600或3/100 —如果愿意也可以记为。03in。这样的文本实在太小了！
由于可能会进行这样的重新缩放，像素被定义为一种相对度量单位，尽管在Web设计中像素表现得很像是绝对单位。
如何取舍？
根据上述所有问题，最好的度量可能是相对度量，特别是em，如果合适也可以使用px。在大多数当前使用的浏览器中，由于ex实际上是em的一部分（0.5em），所以对目前来说ex还不太有用。如果更多的用户代理支持实际的x高度度量，ex可能就会有其用武之地了。总地来说，em是最灵活的，因为它随字体大小缩放，所以元素和元素操作都能更为一致。
对于元素的其他方面，可能更适合使用像素，如元素的边框或定位。这完全由具体情况而定。例如，在原先使用空格GIF来分隔各部分的设计中，如果边距使用像素长度，会得到一种等间距的效果。将这个间距转换为em，会使得设计随文本大小的变化而扩大或收缩，这可能很好，也可能并不是件好事。