很多情況下，網頁設計者如果已經確定將元素定位到哪里，接下來可能希望聲明該元素應當有多高、多寬。另外，有時設計人員可能想限制一個定位元素的高度和寬度，還有一些情況下也許你希望瀏覽器自動地計算寬度或高度（或者寬度和高度都由瀏覽器自動計算）。

設置寬度和高度

如果想為網站建設定位元素指定一個特定的寬度，顯然要用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：定位元素，使其部分超出包含快

在前幾章已經看到，之所以會發(fā)生這種情況，原因在于向內容區(qū)增加了內邊距，而且內容區(qū)的大小由height和width的值確定。要得到網頁設計者想要的內邊距，而且仍保證元素不超出其包含塊，可以去除height和width聲明，或者顯式地將其設置為auto。