4.4 CSS中的长度

许多CSS属性要求为其设置长度值。width属性和font-size属性就是这方面的例子。前者用于设置元素的宽度，后者用于设置元素内容的字号。代码清单4-19所示样式用到了这两个属性。

代码清单4-19 为属性设置长度值

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
width: 5cm;
font-size: 20pt;
                  }
              </style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

设置长度值时，应让数字和单位标识符连在一起，二者之间不加空格或其他字符。代码清单中将width属性值设置为5cm，这表示5个由标识符cm（厘米）代表的单位的长度。同样，将font-size属性值设置为20pt，表示20个由标识符pt（磅，稍后会有介绍）代表的单位的长度。CSS规定了两种类型的长度单位，一种是绝对单位，另一种是与其他属性挂钩的相对单位。下面介绍这两种单位。

4.4.1 绝对长度

上一个代码清单中使用的cm和pt这两个单位都属于绝对单位。这类单位是现实世界的度量单位。CSS支持五种绝对单位，如表4-6所示。

表4-6 CSS中的绝对单位

一条样式中可以混合使用多种单位，包括混合使用绝对单位和相对单位。如果能预先知道内容的呈现方式（例如为供打印的文档设计样式），那么绝对单位很有用处。我设计CSS样式不怎么使用绝对单位。个人认为相对单位更灵活、更容易管理，而且我也很少创作需要与现实世界度量挂钩的内容。

提示

读者可能会奇怪表中怎么没有像素这个单位。实际上，CSS试图把像素作为相对度量单位处理，然而事与愿违。本章稍后会解释这个问题，详情参见4.2节中的“像素单位的问题”。

4.4.2 相对长度

相对长度的规定和实现都比绝对长度更复杂，需要以严密、精确的语言明确定义。相对单位的测量需要依托其他类型的单位。可惜CSS规范的语言还没那么精确（这个问题已经困扰CSS多年）。因此尽管CSS规定了许多既有趣又有用的相对单位，但是其中一些单位还没有得到浏览器广泛、一致的支持，用户还无法使用。表4-7列出了主流浏览器支持的一些CSS相对单位。

表4-7 CSS相对单位

下面来看如何用这些单位表示长度。

1．与字号挂钩的相对单位

使用相对单位时所设置的实际上是另一种度量值的倍数。先来看看与字号挂钩的相对单位。代码清单4-20即为一例。

代码清单4-20 使用相对单位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
font-size: 15pt;
                      height: 2em;
                  }
              </style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <pstyle=" font-size:12pt">I also like mangos and cherries.</p>
              <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

本例将height属性值设置为2em，意思是p元素在屏幕上显示出来的高度应为字号的两倍。这个倍数是在显示每个元素的时候计算出来的。本例在style元素中为p元素的font-size设置了默认值15pt，然后又在文档中第二个p元素的内嵌样式里将该属性值设置为12pt。这些元素在浏览器中的显示结果见图4-15。

图4-15 使用相对单位的效果

相对单位还可以用来表示另一个相对单位的倍数。代码清单4-21所示例子中，height属性值使用的单位是em，这个单位是从font-size属性值推算而得，而font-size属性值在此使用的单位是rem。

代码清单4-21 使用从另一相对单位推算出来的相对单位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
html {
font-size: 0.2in;
}
                  p {
                      background: grey;
                      color:white;
font-size: 2rem;
height: 2em;
                  }
              </style>
            </head>
            <body style="font-size: 14pt">
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

rem单位根据html元素（文档的根元素）的字号而定。本例用一条文档内嵌样式（使用直接在html元素的style属性中定义的元素内嵌样式也行）将html元素的字号设置为0.2英寸（这是一个绝对单位）。在另一条样式中，font-size属性值被设置为2rem，这表示使用该值的所有元素的字号将是根元素字号的两倍——0.4英寸。这条样式中的height属性被设置为2em，这又翻了一番。于是p元素在浏览器中将以0.4英寸的字号显示，其高度则是0.8英寸。从图4-16中可以看到浏览器处理这些样式的方式。

图4-16 根据其他相对单位定义的单位

第三个与字体相关的相对单位是ex。这个单位指的是当前字体的x高度，也即字体基线到中线之间的距离，一般与字母x的高度相当（所以得了这么一个名称），通常1ex大致等于0.5em。

2．像素单位的问题

CSS中的像素恐怕不是你心里想的那样。像素这个术语一般是指显示设备上可寻址的最小单元——图像的基本元素。CSS却是另辟蹊径，其像素定义如下：

参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角（visual angle）。

这正是CSS中那种令人头疼的含糊定义。我无意数落谁，只不过要靠用户臂长来度量的规范未免有点离谱。好在主流浏览器都没有理会CSS定义的像素和显示设备的像素之间的差别，它们将1像素视为1英寸的1/96（这是Windows系统的标准像素密度。有些平台的显示设备具有不同的像素密度，它们的浏览器通常要做些转换工作，让1像素仍然大约等于1英寸的1/96）。

提示

CSS像素的完整定义参见www.w3.org/TR/CSS21/syndata.html#length-units。不过它恐怕派不上什么用场。

这样一来，尽管CSS像素原想定义为相对度量单位，结果却被浏览器当成绝对单位对待。代码清单4-22中的CSS样式使用的就是像素单位。

代码清单4-22 在样式中使用像素单位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
font-size: 20px;
width: 200px;
                  }
              </style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

这个例子中font-size和width属性的值都使用了像素单位。图4-17显示了浏览器应用这些样式的效果。

图4-17 使用像素单位

提示

我在CSS样式中也经常使用像素单位，但这只是一种积习而已。其实em单位更加灵活。如果采用em单位，那么需要修改样式设计时只消改一下字号即可，样式的其他部分一切如常。记住，CSS像素原本是个相对单位，但在实际使用中却变成了绝对单位，因此就没那么灵活了。

3．百分比单位

可以把一个度量单位表示为其他属性值的百分比，这正是%单位的用途，如代码清单4-23所示。

代码清单4-23 以其他属性值的百分比为单位

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
font-size: 200%;
width: 50%;
                  }
              </style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

使用百分比单位会遇到两个麻烦。一是并非所有属性都能用这个单位。二是对于能用百分比单位的属性，那个百分比挂钩的其他属性各不相同。例如，对于font-size属性，挂钩的是元素继承到的font-size值；而对于width属性，挂钩的则是元素的包含块的宽度。

这些问题其实没那么复杂。包含块（这是一个反复出现的重要概念）留待第16章介绍。此外，后面（从第19章起）逐一介绍CSS属性时，将会说明哪些CSS属性支持百分比单位，以及百分比是根据什么属性值计算的。

4．未获广泛支持的CSS属性

除了前面罗列的那些相对单位，CSS还定义了其他一些单位，但是它们还未获得广泛支持。这些新单位都列在表4-8中。假如得到广泛、一致的实现，这些单位会很有用，不过在此之前最好敬而远之。

表4-8 缺乏浏览器支持的CSS相对度量单位

① 这个单位已被重命名为vmin，同时还增加了另一个单位vmax。这两个单位分别等于vw和vh中较小和较大的那个。——译者注

vw、vh、vm这三个单位应用前景广阔，但目前只在IE中得到了实现。而且，据我粗略观察，IE中的实现方式不太符合CSS规范。

5．用算式作值

允许将CSS属性值设置为算式是CSS3定义的一个引人关注的特性。这种灵活手段在控制能力和精确程度方面都给样式设计工作提供了帮助。代码清单4-24即是一例。

代码清单4-24 以算式为值

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  p {
                      background: grey;
                      color:white;
                      font-size: 20pt;
                      width: calc(80% -20px);
                  }
              </style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

算式包含在关键字calc之后的括号之中。在其中可以混合使用各种单位进行基本的算术运算。别高兴得太早，在撰写本书的时候，支持calc()这个特性的只有IE。未得到广泛支持的特性本书一般都避而不谈，不过我相信这个特性会得到大家认可，其采用情况值得持续关注。

上一章目录下一章