css margin屬性兼容性分析

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；

标签：CSS

上一篇
用CSS設置表格邊框的語法詳解

下一篇
css position詳解

css margin屬性兼容性分析

相關文章：

推薦設計

最新文章