2.6 CSS度量

CSS规则可以控制文本的高度、文字的间距、边框的宽度以及元素之间的间隔等。所有这些都需要定义相应的度量机制。

基于CSS进行设计的一个优点是CSS能够保留其灵活性。作为设计人员，你当然希望你的优秀作品在所有终端用户看来都是一致的，同时将元素约束到一套严格的度量机制下的想法也是非常诱人的。另一方面，大多数Web设计人员都明白作为一个浏览平台，Web本质上非常灵活。他们试图研究各种用户自定义的方法，以确保对于终端用户而言，他们的设计能够在最合适的情景下浏览。

CSS提供了两套度量机制——绝对（absolute）和相对（relative）。前者试图固化设计，这样不管以什么方式浏览网站，所有的宽度、高度等都保持不变。而后者使得用户或浏览设备能够控制网页。如果Web设计人员在他们的样式表上需要采用某种控制策略，我们认为相对度量较有优势。就显示而言，它比较稳定。

2.6.1 绝对度量

绝对值有一个固定的特定单位。它能够精确地控制网页的显示。绝对单位包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）、pica（pc）等，如表2-1所示。

表2-1 绝对单位

单　　位	描　　述
in	绝对单位英寸
cm	绝对单位厘米
mm	绝对单位毫米
pt	绝对单位磅，1磅等于1/72英寸
pc	绝对单位pica，1pica等于12磅，等于1/6英寸

如果浏览器知道屏幕大小以及屏幕有多少像素的话，绝对单位可给出预期得到的结果。但是，现实并非如此。并不是所有的显示屏都告诉计算机它们有多大。因此，并不是所有的计算机都知道屏幕有多大。在这种情况下，浏览器必须猜测。

我很高兴地告诉你，几乎所有日常的CSS设计，都不需要用绝对度量也照样可以正常工作。因此，我们可以直接跳到更有意义的相对度量机制。

2.6.2 相对度量

相对度量没有固定的特定值。相反，它们是和继承到的值进行比较后，通过计算得到。相对单位包括百分比（%）、x高度（ex）、em和像素（px）。如表2-2所示。

表2-2 相对单位

单　　位	描　　述
%	相对于另一个值的百分比的单位
ex	相对x高度的单位，由该字体的小写字母x的高度决定
em	相对于元素字体的高度
px	在屏幕上，相对度量的像素单位

为什么仅仅使用相对度量

用户通常是在电脑显示屏上浏览网站的，但是是什么样的显示屏呢？又是什么样的浏览器呢？用户可以在PDA上浏览站点，也可能是通过手机、投影仪甚至是电视来浏览网站。

每个终端设备都有自己的特点，拥有独特的显示方法。并且，用户还可以根据自己的喜好，手动地配置他们的设备（例如对屏幕分辨率的调整）。所有这些都要求你的设计使用相对度量。

Web设计非常重要的一个标准是可访问性——保证所有的用户都能够访问到所有内容。相对度量可以为此提供最好的解决方案。它可以改变文本的大小，当然也可以改变其他网页元素的大小。因此，事实上使用相对度量也是一个很好的习惯。

虽然相对度量不允许设计人员实施很多的绝对控制，但是它们为终端用户创造了更好的体验。下面让我们逐个地了解这些相对单位，并学习如何应用它们来控制文本的字号。

2.6.3 像素

像素（pixel）这个单位为用户布局提供了最好的控制。到目前为止，作为最一致的单位，我们往往用像素来声明外边距、内边距、边框以及像容器、列、按钮之类自定义元素的高度和宽度等。像素也可以和其他的相对单位相结合来实现各种各样的布局要求。

但是，如果需要规定文本的大小，像素并不是最好的选择。因为通过像素来控制文本的大小忽略了用户的偏好。如果一个弱视的用户已经将他/她的浏览设置为用20个像素来显示文本，这个设置通常会被基于像素的字号声明改写掉。

基于像素控制文本大小能够提供跨越大多数终端设备的一致性。不管你的页面怎么被浏览，以及以什么样的分辨率来浏览，11像素的文本可以在其他的像素大小下正常缩放。因此，理想的情况下，如果确定我们的设计在任何平台任何环境下都能保持完整的话，我们就可以放心大胆地使用像素。不幸的是，现实并不是那么理想，因为需要考虑目前非常流行的浏览器IE。

考虑IE/Win用户

非常值得注意的一点是，IE/Win用户不能使用浏览器中重新设置文本大小的工具来重新设置用像素描述的文本的大小。但是，它提供另外一种方法，即使用样式切换器（style switcher）。样式切换器允许用户在页面上调整浏览偏好。PHP等一些类似的语言提供这种机制。现在一些基于JavaScript的样式切换器脚本也已经存在了。这些脚本能够实现无缝切换。但是必须考虑到用户禁用JavaScript的情况。在网站A List Apart（www.alistapart.com/articles/phpswitch）上，Chris Clark在Build a PHP Switcher一文中给出了一个非常好的样式切换器。另外一个影响使用样式切换器的因素是许多用户不知道有这样的方法，或者不能理解其中的关键点。

为了确保所有的终端用户能够基于自己的浏览偏好来浏览网页，强烈建议使用em单位来声明字号（这方面的例子在2.6.5节中将会给出）。

2.6.4 百分比

百分比这个单位具有非常好的灵活性，是大胆布局的一个解决方案。百分比值总是相对于另外一个值而言的，如父元素的宽或高等。换句话说，百分比只能声明为和前面的规则已经定义的尺寸相关，或者是和浏览器窗口的宽度相关的尺寸。

百分比对于布局非常有用，并且是流体设计的一个组成部分。在流体设计中，页面及其元素将被拉伸以适应浏览器窗口。你可以在本书的第二部分学习百分比在这方面的更多使用情况。

一定要小心百分比的值。使用百分比时，继承将会带来麻烦。由于像素和em保留了一些控制，通过浏览器计算的百分比值的结果将与你所期望的有所不同。百分比还导致了其他一些不好的效果，如布局被打乱，元素位置错误或者元素互相重叠等。

示例

此例中，line-hight由规则中的font-size值的百分比值给定，用来控制两行文本之间的距离。

在这个例子中，文本将使用像素来描述line-height，其值是10像素的120%，即行距为12像素。

2.6.5 em

在CSS中，由于最具灵活性，em是最容易被错误理解的相对度量。它非常适用于终端用户的浏览设备和文本偏好难以预测的设计原则。

这个单词本身的起源就对于我们理解em非常有用。该词起源于em约等于大写M字母的大小。因此，它的发音就是“emm”。但是，实际上一个em要稍大一些。em是传统的印刷单位。虽然很多字体并不包含M，但这个术语就是指给定字体的高度。

em使得样式表具有可伸缩性。和传统印刷中的em不一样，CSS中的em几乎可以用来定义所有CSS属性的长度（在此，长度可以是水平方向的也可以是垂直方向的）。当em用于字体和字体所包含的元素时，它的功能尤其强大。它可以利用浏览器工具改变文本的大小，同时它所包含的元素（可以是列、页眉，或者更直接的容器）也可以随之一起变化。如果缩小文本的话，这个伸缩机制将同样起作用。但是，你必须牢记，如果文本是用像素来设定其大小的话，IE/Win模式并不允许用户改变文本的大小。

1．em是如何伸缩的

em是等于一个打印字号的单位。因此，如果在给定的元素中，字号设为11像素，那么1em就等于11像素；如果在另外一个元素中字号为30像素，那么1em就等于30像素；其他可以依次类推。因此，在一个样式表中，1em可以有许多不同的值。成功地使用em的关键是理解em的相对关系。

Richard Rutter（www.clagnut.com）用一个和下面类似的例子来解释了这种方法。在这个例子中，两个容器基本的规则除了字号不一样外，其他完全一样。它们的字号分别是11像素和30像素。两个规则的宽度和高度都是1em。为了表示各个容器的范围，我们为每个容器都加上了黑色的边框。

在网页上，可以得到如图2-1所示的两个框。

图2-1 在浏览器上查看两个容器

尽管两个框的高和宽都是1em，但是，不同的字号使得一个框比另外一个框大。第1个框是11px×11px，即1em×1em。第2个框同样是1em×1em，但是却是30px×30px。

正是如此，em单位是相对于包含它的规则而言。更进一步，如果知道它等于11px的话，我们就可以不用在#firstbox规则中定义em单位。例如，如果希望#firstbox的子元素段落将段落文本的大小定为容器的默认文本的4/5的话，我们可以将其值定义为0.8em。

如果em在#firstbox之外，又不在#secondbox（在此em定义为30px）中，则em被重新设置为其默认值。

提示 1em以默认大小来显示字体字符时，其大小和在(X)HTML元素中显示的一样，因为(X)HTML中的元素就是默认显示。因此，如果将文本的font-size定义为1em的话，那么它的效果将和没有定义时是一样的。

2. em和主体

对于许多设计者而言，默认的字号通常都太大。一般浏览器样式表的字号定义为16px（这就意味着1em等于16px）。这本来是一个非常容易接受的大小，但是许多设计人员（包括用户）都喜欢用11px大小的字体。

通过前面的容器例子，已经知道em单位是相对包含它的元素而言的。在本章的前面部分，我们已经知道由于<body>包括所有可视化页面元素，所以所有的页面元素都继承<body>元素。因此，<body>是声明em的最佳地点，这样继承树上的所有子元素都继承该值。

对基于em的设计而言，为主体文本定义小于1em的字号是一个很好的开始。譬如，你可以将默认文本定义为11px。下面的规则将确保文本一般都是这个大小：

如果没有在样式表中添加其他的度量，那么所有默认文本都将是0.8em，约11px。但是，这也意味着，在基于Mozilla的浏览器中，所有的标题（<h1>到<h6>）、段落、列表等的大小都是默认大小的4/5（其他浏览器将保持默认值）。另外，IE/Win中的表单和表格文本也只有默认大小的4/5。因此，这些元素需要在相应的规则中另外声明它们的字号。

这样，所有相关的页面元素都有字号，它们都基于在body中声明的字号。所有页面上的文本，在任何浏览器任何设置下都能按比例伸缩。

将em的大小建立在原始的百分比声明之上

Richard Rutter在How to Size Text Using Ems（www.clagnut.com/blog/348/）一文中，提出了另外一种基于初始font-size利用百分比来改变字号的方法。这样，所有的em值很容易就能和一个特定的像素大小相联系。

Richard首先在主体定义选择器中声明font-size:62.5%（可能由于样式表在之前没有定义单位，浏览器样式表的默认值将叠加在它上面）。这个声明可以有效地将默认的font-size由16px变为10px。这样以后即使用em声明大小，你也可以把它考虑成像素了。基于这个设置，Richard提出了一些em和像素大小之间的关系：