一般地，網(wǎng)站建設(shè)中元素的大小和位置取決于其包含塊。各個屬性（width、right、padding-left 等）的值也會有一些影響，不過最主要的還是其包含塊。

考慮一個定位元素的寬度和水平放置。這可以表示為一個等式：

left+margin-left+border-left-width+padding-left+width+padding-right+border-right- width+margin-right+right=包含塊的width。

這個計算是很合理的?；旧蠒蛇@個等式來確定正常流中塊級元素的大小，除非增加了left和right。所有這些屬性之間有什么關(guān)系呢？以下是一組規(guī)則。

首先，如果left、width和right都設(shè)置為auto，會得到上一節(jié)所示的結(jié)果：左邊界置于其靜態(tài)位置（假設(shè)使用從左向右讀的語言）。在從右向左讀的語言中，則是右邊界置千其靜態(tài)位置。元素的width設(shè)置為“收放得正好合適”，這說明該元素的內(nèi)容區(qū)寬度恰好只能包含其內(nèi)容（而沒有多余空間）。這與表單元格的行為很類似。非靜態(tài)位置屬性要適當(dāng)設(shè)置，以保證余下的距離。例如：

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 0; right: auto; width:auto;

background: silver;">shrink-wrapped</span> thanks to the way positioning rules work.

</div>

這會得到如圖10-44所示的結(jié)果。

網(wǎng)站建設(shè)元素的頂端根據(jù)其包含塊的頂端放置，且元素的寬度剛好足夠包含內(nèi)容。從元素右邊界到包含塊右邊界之間余下的距離則是right的計算值。

假設(shè)左右外邊距都設(shè)置為auto，而left、width和right不是auto，如下例所示：

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: l0em; margin: 0 auto; background: silver;">shrink-wrapped</span> thanks to the way positioning rules work.

此時，左右外邊距會設(shè)置為相等的值。這實(shí)際上會讓元素居中，如圖10-45所示。

這與正常流中的auto外邊距居中行為基本上是一樣的。所以，假設(shè)外邊距不為auto:

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em;

margin-left: 1em; margin-right: 1em; background: silver;">shrink-wrapped</span> thanks Co the way positioning rules work.

</div>

現(xiàn)在就有問題了。網(wǎng)站建設(shè)定位元素span的屬性只增加為14em，而包含塊寬度為25em。這里有11em的差額，必須從某個地方彌補(bǔ)。

規(guī)則指出，在這種情況下，用戶代理會忽略right的值，并重置right的值。換句話說，其結(jié)果就好像聲明了以下規(guī)則一樣：

<span style="position: absolute; top: 0; left: 1em; right: 12em; width: 10em; margin-lefc: 1em; margin-right: 1em; background: silver;">shrink-vn:apped</span>

其結(jié)果如圖10-46所示，

如果某個外邊距保持為auto，則會改變這個外邊距。假設(shè)將樣式改為：

<span style="position: absolute; top: 0; left: lan; right: 1em; width: 10em; margin-left: 1em; margin-right: auto; background: silver;">shrink-wrapped</span>

視覺效果與圖10-46所示相同，只不過這是通過將右外邊距重新計算為12em得到的，而不是覆蓋為屬性right指定的值。另一方面，網(wǎng)頁設(shè)計人員如果將左外邊距置為auto，則會重置左外邊距，如圖10-47所示：

圖10-47：過度受限情況下忽略margin-left的值

一般地，如果網(wǎng)頁設(shè)計人員只把一個屬性設(shè)置為auto，就會修改這個屬性來滿足本節(jié)前面給出的等式。給定以下樣式，元素會延伸到必要的寬度，而不是“收縮”內(nèi)容：

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em; margin-left: auto; margin-right: 1em; background: silver;">shrink-wrapped</span>

到目前為止，我們實(shí)際上只考慮了水平軸的行為，不過對于垂直軸，規(guī)則非常類似。還是看前面的討論，只要將其旋轉(zhuǎn)90度就會得到幾乎相同的行為。例如，以下標(biāo)記會得到如圖10-48所示的結(jié)果：

<div styles"position: relative; width: 30em; height: 10em;border: 1px solid;">

<div style="position: absolute; left: 0; width: 30%; background:#CCC;top: 0;"> element A </div>

<div aty-le='position: absolute; left: 35%; width: 30%; background:#AAA; top: 0; height: 50%;"> element B"

<div style="position: absolute; left: 70%; width: 30%; background:#CCC;height: 50%; bottom: 0;"> element C </div>

在第一個例子中，元素的高度收縮為內(nèi)容的高度。在第二個例子中，未指定的屬性（bottom）設(shè)置為適當(dāng)?shù)闹?，來彌補(bǔ)定位元素底端與其包含塊底端之間的距離。在第三個例子中，未指定的屬性是top，所以由top來彌補(bǔ)定位元素頂端與其包含塊頂端之間的拒離。

對此，外邊距為auto可以得到垂直居中的效果。給定以下樣式，絕對定位元素div將在其包含塊中垂直居中，如圖10-49所示：

<div style="position: relative; width: 10em; height: 10em;border: 1px solid;">

<div style="position: absolute; left: 0; width: 100%; background:#CCC; top: 0; height: 5em; bottom: 0; margin: auto 0;">

圖10-49：將外邊距為auto的絕對定位元素垂直居中

還要指出兩個小變化。在水平布局中，如果值設(shè)置為auto, right或left都可以根據(jù)其靜態(tài)位置放置。但在垂直布局中，只有top可以取靜態(tài)位置，出于某種原因，bottom 做不到。

注意：寫作本書時，Internet Explorer的所有版本都不支持絕對定位元素通過將上下外邊距設(shè)置為auto來實(shí)現(xiàn)垂直居中的行為。

另外，如果一個絕對定位元素的大小在垂直方向上過度受限，將忽略bottom。因此，網(wǎng)站建設(shè)對于以下情況，bottom的聲明值會被計算值5em覆蓋：

<div style="position: relative; width: 10em; height: 10em;border: 1px solid;">

<div style:"position: absolute; left: 0; width: 100%; background:#CCC;top: 0; height; 5em; bottom: 0; margin: 0;"> element D </div>

</div>

如果屬性過度受限，沒有規(guī)定將top忽略。