DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> css margin屬性兼容性分析
css margin屬性兼容性分析
編輯:關於CSS     

margin,是透明的,在它設置的值的范圍內,父元素的背景色或背景圖片均不受影響,能夠完整的呈現給用戶看到。margin屬性通過單獨的屬性對其上、右、下、左依次進行賦值,我們常見的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道:margin:10px 15px 3px;什麼意思嗎?你以為它的表達意思是:margin:10px 15px 3px 0px;嗎??那我來告訴你,錯誤:它的表達意思是margin:10px 15px 3px 15x;呵呵!great。這個才是正確的。在實際應用中,或者閱讀別人代碼的時候不要理解錯誤或者,沒有看到過這個,就隨便猜測作者的想法。
 
注釋:允許使用負值。
 
例子 1
 margin:10px 5px 15px 20px;上外邊距是 10px
右外邊距是 5px
下外邊距是 15px
左外邊距是 20px
例子 2
 margin:10px 5px 15px;上外邊距是 10px
右外邊距和左外邊距是 5px
下外邊距是 15px
例子 3
 margin:10px 5px;上外邊距和下外邊距是 10px
右外邊距和左外邊距是 5px
 

 margin垂直外邊距不兼容標准?
 
實際工作中,垂直外邊距合並問題常見於第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距,而且只在標准浏覽器下 (FirfFox、Chrome、Opera、Sarfi)產生問題,IE下反而表現良好。例子可以查看下面代碼(IE下表現“正常”,標准浏覽器下查看出現“bug”)有代碼有真相:
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>垂直外邊距合並</title>
  <style>
  .top{width:160px; height:50px; background:#ccf;}
  .middle{width:160px; background:#cfc;}
  .middle .firstChild{margin-top:20px;}
  </style>
  </head>
  
 <body>
  <div class="top"></div>
  <div class="middle">
    <div class="firstChild">我其實只是想和我的父元素隔開點距離。</div>
    <div class="secondChild"></div>
  </div>
  </body>
  </html>
 

你來運行一下是不是感覺,這個在IE中顯示正常?而在其他對css教程2高度兼容的firefox下顯示異常??我來告訴你,這是因為IEIE的hasLayout渲染導致了這個“表現良好”的外觀。而其他標准浏覽器則會表現出“有問題”的外觀。如果按照css規范來說,IE的表現是錯誤的,而FirfFox、Chrome、Opera、Sarfi等主流浏覽器則解析的符合css規范。
 
    舉個例子來說:父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素,祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級,假傳聖旨,把自己的margin當領導的margin執行(雖然它的值比“真龍”的值大)。
      用Margin還是用Padding
 
     對於這個問題,很多人問過我,他們說,padding和margin為什麼要分開用,它們的區別也不大,達到的效果也不差,為什麼它們是兩種定義?很多人會容易弄混淆,特別是新手,一般都是新手問我這個問題。
 
     下面我們來說下,為什麼要區別來用,padding和margin:
 
     當我們想要在子元素使用背景,而父元素不適應背景,達到圖片“頂住”,文字“不頂住”間隔一段距離的時候要用padding;
 
     當我們讓子元素邊框要頂住父元素,而覆蓋父元素背景圖片或背景色的時候使用padding;
 
     當我們希望讓子元素和父元素有點距離,但不影響父元素背景圖片展示的時候用margin;

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved