国产午夜亚洲精品国产成人_欧美屁股大的xxxxx_丰满巨肥大屁股bbw网站_日韩精品亚洲aⅴ在线影院_旧番剧精灵の森へようこそ

網(wǎng)頁(yè)設(shè)計(jì)中的auto設(shè)置

  • 2018-10-16 18:07:16
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.gtalker.cn

設(shè)置auto

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

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

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

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

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

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

圖7-6:覆蓋margin-right設(shè)置

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

如果兩個(gè)外邊距都顯式地設(shè)置,而width設(shè)置為auto, width值將設(shè)置為所需的某個(gè)值,從而達(dá)到需要的總寬度(即父元素的內(nèi)容寬度)。以下標(biāo)記的結(jié)果如圖7-7所示:

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

圖7-7中所示例子最為常見,因?yàn)檫@等價(jià)于只設(shè)置外邊距,而沒(méi)有為width作任何聲明。以下標(biāo)記的結(jié)果與圖7-7所示完全相同:

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

不只一個(gè)auto

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

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

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

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

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

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

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

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

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

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

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

當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的auto設(shè)置

當(dāng)前URL:http://www.gtalker.cn/news/wzzz/auto-setting.html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的水平元素

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中的負(fù)外邊距

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))