很多情况下，网页设计者如果已经确定将元素定位到哪里，接下来可能希望声明该元素应当有多高、多宽。另外，有时设计人员可能想限制一个定位元素的高度和宽度，还有一些情况下也许你希望浏览器自动地计算宽度或高度（或者宽度和高度都由浏览器自动计算）。

设置宽度和高度

如果想为网站建设定位元素指定一个特定的宽度，显然要用width属性。类似地，利用height 可以为定位元素声明特定的高度。

尽管有时设置一个元素的宽度和高度很重要，但对于定位元素来说则不一定必要。例如，网页设计者如果使用top. right, bottom和left来描述元素4个边的放置位置，那么元素的高度和宽度将由这些偏移隐含确定。假设你希望一个绝对定位元素从上到下填充其包含块的左半部分，可以使用以下值，其结果见图10-28所示：

top: 0; bottom: 0; left: 0; right: 50%;

图10-28：使用偏移属性定位元素的同时设置元素大小

由于width和height的默认值都是auto，图10-28所示的结果就好像使用了以下值一样：

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%;

这个例子中尽管出现了Width和height，但它们对元素的布局没有任何作用。

当然，倘若向元素增加了外边距、边框或内边距，此时如果为height和width显式指定了值，情况就不同了：

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%; padding: 2em;

这会使网页设计定位元素延伸超出其包含块，如图10-29所示。

图10-29：定位元素，使其部分超出包含快

在前几章已经看到，之所以会发生这种情况，原因在于向内容区增加了内边距，而且内容区的大小由height和width的值确定。要得到网页设计者想要的内边距，而且仍保证元素不超出其包含块，可以去除height和width声明，或者显式地将其设置为auto。