網(wǎng)頁設計中的合并外邊距

  • 2018-11-26 17:27:48
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

第7章曾經(jīng)討論過,網(wǎng)頁設計人員可以為元素設置負外邊距。這會導致元素框超出其父元素,或者與其他元素重疊,但并不違反框模型??紤]以下規(guī)則:

div{border:1px dotted gray;margin:1em;}

p{margin:1em;border:1px dashed silver;}

p.one{margin:0-1em;}

p.two{margin:-1em 0;}

在第一個例子中,根據(jù)數(shù)學計算,這個段落的width計算值加上其左右外邊距剛好等于父元素div的width。所以,這個段落最后將比其父元素寬2em,但從數(shù)學角度講實際上并沒有更“寬”。在第二個例子中,負的上下外邊距實際上增加了元素的height計算值,將其上下外邊界向外移,這就與它之前和之后的段落發(fā)生了重疊。

網(wǎng)頁設計結合使用正負外邊距會很有用。例如,可以創(chuàng)造性地結合正負外邊距,使一個段落“超出”其父元素,或者可以創(chuàng)建一種蒙德里安風格的效果,有多個重疊或隨機放置的框。

div{background:silver;border:1px solid;}

p{margin:1em;}

p.punch{background:white;margin:1em-1px 1em 25%;

border:1px solid;border-right:none;text-align:center;}

p.mond{background:#333;color:white;margin:1em 3em-3era-3em;}

由于“mond”段落的下外邊距為負,其父元素的底端會向上拉,使得段落超出其父元素的底端。

說到上下外邊距,網(wǎng)頁設計人員還要記住重要的一點,正常流中垂直相鄰外邊距會合并,這個內容在上一章已經(jīng)介紹過。外邊距合并在設置了樣式的每一個文檔中都在起作用。例如,以下是一個簡單的規(guī)則:

p{margin:15px 0;}

這會導致一個段落跟在另一個段落后,二者之間有15像素的“外邊距空間”。如果外邊距沒有合并,那么這兩個相鄰段落之間應當有30像素的空間,但是網(wǎng)站建設人員不希望這樣。

不過,這確實說明設置外邊距時必須小心。你很有可能想去掉標題和下一段之間的空間。由于HTML文檔中的段落都有一個上外邊距,如果只是將標題的下外邊距設置為0是不夠的,還必須去掉段落的上外邊距。利用CSS2的相鄰兄弟選擇器很容易做到這一點:

h2{margin-bottom:0;}

h2+p{margin-top:0;}

遺憾的是,瀏覽器對相鄰兄弟選擇器的支持還很有限(在寫作本書時),大多數(shù)用戶都會看到標題與其下一段之間有1em的間隔。不使用網(wǎng)站建設CSS2選擇器也可以得到所要的效果,不過要麻煩一些:

h2{margin-bottom:0;}

p{margin:0 0 1em;}

這會去除所有段落的上外邊距,不過由于段落都還有一個1em的下外邊距,所以還會保留所要的段間間隔,如圖8-14所示。

這樣能正常工作,因為段落之間的1em間隔是外邊距合并的結果。因此,如果去掉其中一個外邊距(在這里就是上外邊距視覺效果與保留該外邊距的效果是一樣的。

當前文章標題:網(wǎng)頁設計中的合并外邊距

當前URL:http://m.iy5y368.cn/news/wzzz/Merge-from.html

上一篇:網(wǎng)頁設計中的單邊外邊距屬性

下一篇:網(wǎng)頁設計中外邊距和行內元素

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