設置auto

網(wǎng)頁(yè)設計中如果設置width、margin-left或margin-right中的某個(gè)值為auto，而余下兩個(gè)屬性指定為特定的值，那么設置為auto的屬性會(huì )確定所需的長(cháng)度，從而使元素框的寬度等于父元素的width。換句話(huà)說(shuō)，假設7個(gè)屬性的和必須等于400像素，沒(méi)有設置內邊距或邊框，而且右外邊距和width設置為100px，左外邊距設置為auto。那么左外邊距的寬度將是200像素：

p {margin-left: auto; margin-right: 100px; width:100px;}/*'auto' left margin evaluates to 200px */

從某種程度上講，網(wǎng)頁(yè)設計中可以用auto彌補實(shí)際值與所需總和的差距。不過(guò)，如果這3個(gè)屬性都設置為100px，即沒(méi)有任何一個(gè)屬性設置為auto會(huì )怎么樣呢？

如果所有這3個(gè)屬性都設置為非auto的某個(gè)值—或者，按CSS的術(shù)語(yǔ)來(lái)講，這些格式化屬性過(guò)分受限（overconstrained）或者，此時(shí)總會(huì )把margin-right強制為auto。這意味著(zhù)，如果外邊距和width都設置為100px，用戶(hù)代理將把右外邊距重置為auto，右外邊距的實(shí)際寬度則會(huì )根據有一個(gè)auto值時(shí)的規則來(lái)設置，即由這個(gè)auto 值“填補"所需的距離，使元素的總寬度等于其包含塊的width。圖7-6顯示了以下標記的結果：

p {margin-left: 100px; margin-right: 100px;

width! 100px;}/* right margin forced to be 200px */

圖7-6：覆蓋margin-right設置

注意：網(wǎng)頁(yè)設計只是對從左向右讀的語(yǔ)言（如英語(yǔ)）將margin-right強制為auto。如果是從右向左讀的語(yǔ)言，一切正相反，所以會(huì )把margin-left強制為auto，而不是margin-right.

如果兩個(gè)外邊距都顯式地設置，而width設置為auto, width值將設置為所需的某個(gè)值，從而達到需要的總寬度（即父元素的內容寬度）。以下標記的結果如圖7-7所示：

p {margin-left: 100px; margin-right: 100px; width: auto;}

圖7-7中所示例子最為常見(jiàn)，因為這等價(jià)于只設置外邊距，而沒(méi)有為width作任何聲明。以下標記的結果與圖7-7所示完全相同：

p {margin-left: 100px; margin-right: 100px;}/* same as before */

不只一個(gè)auto

下面來(lái)看如果這3個(gè)屬性（width、margin-left或margin-right）中有兩個(gè)都設置為auto會(huì )出現什么情況。如果兩個(gè)外邊距都設置為auto，如以下代碼所示，它們會(huì )設置為相等的長(cháng)度，因此將元素在其父元素中居中，如圖7-8所示：

p {width:100px; margin-left: auto; margin-right: auto;}

將兩個(gè)外邊距設置為相等的長(cháng)度是將元素居中的一種正確方法，這不同于使用text-align (text-align只應用于塊級元素的內聯(lián)內容，所以將元素的text-align設置為center并不能將這個(gè)元素居中）。

警告：網(wǎng)站建設中，只有1999年2月以后發(fā)布的瀏覽器能正確地處理auto外邊距居中，而不是所有瀏覽器都能完全做對。不能正確處理auto外邊距的瀏覽器表現也各不相同，不過(guò)可以肯定的一點(diǎn)是，老式的瀏覽器會(huì )把兩個(gè)外邊距都重置為0。

設置元素大小的另一種方法是將某個(gè)外邊距以及width設置為auto。設置為auto的外邊距會(huì )減為0:

p {margin-left: auto; margin-right: 100px; width: auto;}/* left margin evaluates to 0 */

然后width會(huì )設置為所需的值，使得元素完全填充其包含塊。

最后一點(diǎn)，網(wǎng)頁(yè)設計中如果這3個(gè)屬性都設置為auto會(huì )怎么樣呢？答案很簡(jiǎn)單：兩個(gè)外邊距都會(huì )設置為0，而width會(huì )盡可能寬。這種結果與默認情況是相同的，即沒(méi)有為外邊距或width顯式聲明任何值。在這種情況下，外邊距默認為0, width默認為auto。

注意，由于水平外邊距不會(huì )合并，父元素的內邊距、邊距和外邊距可能影響其子元素。這種效果是間接的，即一個(gè)元素的外邊距（以及內邊距。邊距等等）可能會(huì )為子元素帶來(lái)偏移。以下標記的結果如圖7-9所示：

div {padding: 30px; background: silver;} 

p {margin: 20px; padding: 0; background: white;}