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

  • 2018-10-17 15:02:06
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

到目前為止,看上去一切都很直接明了,你可能會(huì)奇怪前面為什么會(huì)說情況可能很復(fù)雜。外邊距還有一個(gè)方面很特殊:外邊距可以為負(fù),這種設(shè)置是對(duì)的,完全可以將外邊距設(shè)置為負(fù)值。這么做會(huì)帶來一些有意思的效果(假設(shè)用戶代理完全支持這種負(fù)外邊距)。

注意:按照CSS網(wǎng)站建設(shè)規(guī)范,用戶代理不要求完全支持負(fù)外邊距。規(guī)范指出:“外邊距屬性允許為負(fù)值,不過可以有一些特定于具體實(shí)現(xiàn)的限制。”不過在寫作本書時(shí),當(dāng)前瀏覽器中這種限制很少(幾近沒有)。

要記住,網(wǎng)頁設(shè)計(jì)中7個(gè)水平屬性的總和要等于父元素的width。只要所有屬性都是大于或等于0的,元素就不會(huì)大于其父元素的內(nèi)容區(qū)。不過,考慮以下標(biāo)記,其結(jié)果如圖7-10所示:

div {width:400px; border: 3px solid black;}

p.wide {margin-left: l0px; width: auto; margin-right:-50px;}

圖7-10:通過指定負(fù)外邊距得到更寬的子元素

不錯(cuò),子元素確實(shí)比其父元素還寬!數(shù)學(xué)計(jì)算并沒有錯(cuò)誤:

10px + 0 + 0 + 440px + 0 + 0 - 50px = 400px

440px是width: auto的實(shí)際計(jì)算值,需要這樣一個(gè)數(shù)與等式中余下的值相抵(從而使總和為400px)。盡管這導(dǎo)致子元素超出了其父元素,但并沒有違反規(guī)范,因?yàn)?個(gè)屬性值加在一起仍等于所需的總寬度。網(wǎng)頁設(shè)計(jì)中,這在語義上有些牽強(qiáng),但確實(shí)是合法的行為。

下面再加上一些邊框:

div {width: 400px; border: 3px solid black;}

p.wide {margin-left: l0px; width: auto; margin-right:-50px; border: 3px solid gray;}

這樣一來,計(jì)算出的width值會(huì)減少:

10px + 3px + 0 + 434px + 0 + 3px - 50px = 400px

如果還要設(shè)置內(nèi)邊距,width值會(huì)進(jìn)一步減少。

與此相反,還有可能將auto右外邊距計(jì)算為負(fù)值。如果其他屬性的值要求右外邊距為負(fù),以便滿足元素不能比其包含塊更寬的需求(譯注1)[1],就會(huì)出現(xiàn)這種情況。考慮以下規(guī)則:

div {width: 400px; border: 3px solid black;}

p.wide {margin-left: 10px; width: 500px; margin-right: auto; border: 3px solid gray;}

等式如下:

10px + 3px + 0 + 500px + 0 + 3px - 116px = 400px

右外邊距計(jì)算為-116px,即使為它指定了另一個(gè)值(即所有水平屬性都指定為特定值,而不是auto),由于元素水平屬性過分受限時(shí)有一個(gè)規(guī)則,要求重置右外邊距,這也會(huì)得到一個(gè)負(fù)右外邊距。此時(shí)右外邊距重置為所需的值,以保證元素水平屬性的總和等于其父元素的內(nèi)容寬度(不過,從右向左讀的語言例外,對(duì)于這些語言,將重置左外邊距)。

下面考慮另一個(gè)例子,如圖7-11所示,這里左外邊距設(shè)置為負(fù)值:

div {width: 400px; border: 3px solid black;} 

p.wide {margin-left:-50px; width: auto; margin-right: l0px; border: 3px solid gray;}

如果左外邊距為負(fù),不僅段落會(huì)超出div的邊框,還會(huì)超出瀏覽器窗口本身的邊界!

注意:網(wǎng)頁設(shè)計(jì)中要記住,內(nèi)邊距、邊框和內(nèi)容寬度(及高度)絕對(duì)不能為負(fù)。只有外邊距能小于0。


當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的負(fù)外邊距

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/Negative-margin.html

上一篇:網(wǎng)頁設(shè)計(jì)中的auto設(shè)置

下一篇:網(wǎng)頁設(shè)計(jì)中的百分?jǐn)?shù)和替換元素

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