一般地,網(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。
這個計(jì)算是很合理的?;旧蠒蛇@個等式來確定正常流中塊級元素的大小,除非增加了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的計(jì)算值。
假設(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所示相同,只不過這是通過將右外邊距重新計(jì)算為12em得到的,而不是覆蓋為屬性right指定的值。另一方面,網(wǎng)頁設(shè)計(jì)人員如果將左外邊距置為auto,則會重置左外邊距,如圖10-47所示:
圖10-47:過度受限情況下忽略margin-left的值
一般地,如果網(wǎng)頁設(shè)計(jì)人員只把一個屬性設(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的聲明值會被計(jì)算值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忽略。