網(wǎng)站建設(shè)中，把“放置”和“大小”這兩個(gè)概念放在一起看上去有些奇怪，不過(guò)對(duì)于絕對(duì)定位元素來(lái)說(shuō)，這是必要的，因?yàn)橐?guī)范把它們緊密地綁在一起。如果網(wǎng)頁(yè)設(shè)計(jì)人員仔細(xì)考慮，這也不那么奇怪。請(qǐng)考慮如果一個(gè)元素使用4個(gè)偏移屬性來(lái)定位會(huì)發(fā)生什么情況，如下：

#masthead h1 {position: absolute; top: 1em; left: lent; right: 25%; bottom: l0px;

margin: 0; padding: 0; background: silver;}

在此，h1元素框的高度和寬度由其外邊距邊界的放置決定，如圖10-41所示s

圖10-41：根據(jù)偏移屬性確定元素的高度

如果包含塊更高，那么h1也會(huì)更高；如果包含塊更窄，h1也會(huì)跟著更窄。如果向h1 增加外邊距或內(nèi)邊距，這會(huì)對(duì)h1的高度和寬度計(jì)算值有進(jìn)一步的影響。

但是網(wǎng)頁(yè)設(shè)計(jì)人員這樣做之后，再試圖設(shè)置一個(gè)顯式的高度和寬度會(huì)怎么樣呢？

#masthead h1 {position: absolute; top: 0; left: 1em; right: 10%; bottom: 0; margin: 0; padding: 0; height: 1em; width: 50%; background: silver;}

必須做些工作，因?yàn)樗羞@些值都正確是不太可能的。實(shí)際上，包含塊寬度必須是h1的 font-size計(jì)算值的2.5倍，這樣以上的值才能正確。如果是其他寬度，則說(shuō)明至少有一個(gè)值是錯(cuò)誤的，相應(yīng)地必須將其忽略。到底哪一個(gè)值是錯(cuò)誤的，這取決于很多因素，而且根據(jù)元素是替換元素還是非替換元素還會(huì)有所不同。

為此考慮以下規(guī)則：

#masthead h1 {position: absolute; top: auto; left: auto;}

結(jié)果會(huì)是什么呢？網(wǎng)頁(yè)設(shè)計(jì)人員可以看到，答案并不是“將值重置為0”。下一節(jié)將介紹真正的答案。