網頁設計中的負外邊距2

  • 2019-02-19 17:13:44
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://51zuanshi.com.cn

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

下面考慮一個向左浮動的浮動圖像,其左外邊距和上外邊距都是-15px。這個圖像放在一個div中,該div沒有內邊距、邊框和外邊距。結果如圖10-17所示。

圖10-17:有負外邊距時的浮動

盡管看上去有問題,但實際上并沒有違反浮動元素放在其父元素之外的相關限制。

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

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

圖10-18:利用負外邊距向上和向左浮動詳解

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

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

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

當前文章標題:網頁設計中的負外邊距2

當前URL:http://51zuanshi.com.cn/news/wzzz/negative-margin2.html

上一篇:網頁設計中的實用行為

下一篇:網頁設計中的清除

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)