(2) 将前面的标记保存为example_2-2.html。图2-2显示了width:auto;应用于<div>元素的效果。

图  2-2

工作原理

所有带width属性的元素都有一个默认的auto值，但在使用自动宽度时，并不是所有元素都具有相同的效果。例如，<table>元素只是水平扩展以容纳其中的数据，这种方法称为“收缩适应”(shrink-to-fit)。另一方面，<div>元素则尽可能水平扩展其宽度，这种方法称为“扩展适应”(expand-to-fit)。

示例2-1和示例2-2中对每个元素都设置了背景，这样用户可以看到其宽度。边框勾勒出每个元素的边界，准确显示了每个元素占用的空间。第8章将详细介绍width属性的工作原理。

关键字通常调用一些特殊的、预定义的行为。这里通过CSS border属性再给出一个示例：边框可以使用3个独立的关键字来定义它在浏览器中呈现的样式：

border: thin solid black;

该示例使用3个关键字值(thin、solid和black)定义了一个属性。每个值都表示不同特征的边框外观：thin表示度量，solid表示样式，black表示颜色：

有时候设计人员需要引用样式表中的内容、文件路径、名称中包含空格的字体名称或者HTML元素的属性值。为了实现这些功能，CSS提供了另一种属性值—— 字符串。