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

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

  • 2019-02-19 17:13:44
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.gtalker.cn

有意思的是,網(wǎng)站建設(shè)里負(fù)外邊距可能導(dǎo)致浮動(dòng)元素移到其父元素的外面。這看上去與先前的規(guī)則相矛盾,不過(guò)其實(shí)并不矛盾。通過(guò)設(shè)置負(fù)外邊距,元素可能看上去比其父元素更寬,同樣的道理,浮動(dòng)元素也可能超出其父元素。

下面考慮一個(gè)向左浮動(dòng)的浮動(dòng)圖像,其左外邊距和上外邊距都是-15px。這個(gè)圖像放在一個(gè)div中,該div沒(méi)有內(nèi)邊距、邊框和外邊距。結(jié)果如圖10-17所示。

圖10-17:有負(fù)外邊距時(shí)的浮動(dòng)

盡管看上去有問(wèn)題,但實(shí)際上并沒(méi)有違反浮動(dòng)元素放在其父元素之外的相關(guān)限制。

仔細(xì)研究上一節(jié)的規(guī)則可以發(fā)現(xiàn),從技術(shù)上講這種行為是允許的:一個(gè)浮動(dòng)元素的外邊界必須在父元素內(nèi)。不過(guò),由于外邊距為負(fù),放置浮動(dòng)元素的內(nèi)容時(shí)就好像覆蓋了自己的外邊界一樣,如圖10-18所示,

通過(guò)數(shù)學(xué)計(jì)算描述如下:假設(shè)div的上內(nèi)邊界在100像素處。為了得出浮動(dòng)元素的上內(nèi)邊界應(yīng)該在哪里,瀏覽器會(huì)做以下計(jì)算:100px +(-15pX)外邊距+0內(nèi)邊距=85px,因此,網(wǎng)站建設(shè)浮動(dòng)元素的上內(nèi)邊界應(yīng)當(dāng)在85像素處,盡管比浮動(dòng)元素父元素的上內(nèi)邊界還要高,但從數(shù)學(xué)計(jì)算可知,這并沒(méi)有違反規(guī)范。出于類似的原因,同樣可以解釋為什么浮動(dòng)元素的左內(nèi)邊界可以放在其父元素左內(nèi)邊界的左邊。

圖10-18:利用負(fù)外邊距向上和向左浮動(dòng)詳解

現(xiàn)在可能很多網(wǎng)頁(yè)設(shè)計(jì)人員都想大叫“犯規(guī)!”從我個(gè)人來(lái)說(shuō),不會(huì)為此批評(píng)你們。例如,上內(nèi)邊界比上外邊界還要高,這看上去是完全錯(cuò)誤的,不過(guò),如果有一個(gè)負(fù)的上外邊距,確實(shí)會(huì)產(chǎn)生這種結(jié)果,這與負(fù)外邊距使正常的非浮動(dòng)元素視覺(jué)上比其父元素還要寬是一樣的》浮動(dòng)元素框的4個(gè)邊都是如此:如果將外邊距設(shè)置為負(fù)值,內(nèi)容就會(huì)超出外邊界,但從技術(shù)上講并沒(méi)有違反規(guī)范。

這里有一個(gè)重要問(wèn)題:在使用負(fù)外邊距時(shí),如果浮動(dòng)元素元素超出其父元素,文檔會(huì)如何顯示?例如,一個(gè)圖像可能浮動(dòng)得太遠(yuǎn),超出了用戶代理已顯示的一個(gè)段落。在這種情況下,要由用戶代理決定文檔是否重新顯示,網(wǎng)站建設(shè)CSS1和CSS2規(guī)范明確地指出,用戶代理不必重新顯示已顯示內(nèi)容來(lái)適應(yīng)文檔中后來(lái)出現(xiàn)的內(nèi)容。換句話說(shuō),如果一個(gè)圖像浮動(dòng)到之前已經(jīng)顯示的段落中,它可能只是覆蓋該位置上原有的內(nèi)容。另一方面,用戶代理也可能采用一種不同的方法處理這種情況,讓內(nèi)容環(huán)繞浮動(dòng)元素重新顯示。不論采用哪種方式,都不要指望肯定會(huì)發(fā)生某一種行為,否則為浮動(dòng)元素設(shè)置負(fù)外邊距的作用會(huì)受到限制。讓元素浮動(dòng)可能很安全,不過(guò)網(wǎng)頁(yè)設(shè)計(jì)人員試圖將元素在頁(yè)面上向上推往往不是好主意。

還有另外一種方法可以讓浮動(dòng)元素超出其父元素的左右內(nèi)邊界:即浮動(dòng)元素比其父元素更寬。在這種情況下,浮動(dòng)元素會(huì)超出右或左內(nèi)邊界,從而盡可能正確地顯示,究競(jìng)是超出右內(nèi)邊界還是左內(nèi)邊界,取決于元素以何種方式浮動(dòng)。這會(huì)得到如圖10-19所示的結(jié)果。

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

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

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的實(shí)用行為

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中的清除

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