以下的分享是本人最近幾天學習了margin知識后，大有啟發，感覺以前對margin的了解簡直太淺薄。所以寫成以下文章，一是供自己整理思路；二是把知識分享出來，避免各位對margin屬性的誤解。內容可能會有點多，但都是精華，希望大家耐心學習。

以下的分享會分為如下內容：

1.margin 屬性的簡單介紹

　　1.1：普通流的 margin 百分比設置

　　1.2：絕對定位的 margin 百分比設置

2.margin 無法適用的元素

3.外邊距折疊 (Collapsing margins)

　　3.1：Collapsing margins 初衷

　　3.2：Collapsing margins 類型

　　　　3.2.1：兄弟元素的 margin 重疊

　　　　3.2.2：父子元素的 margin 重疊

　　　　3.2.3：元素自身的 margin-bottom 和 margin-top 相鄰時也會折疊

4.折疊后 margin 的計算規則

　　4.1：參與折疊的 margin 都是正值

　　4.2：參與折疊的 margin 都是負值

　　4.3：參與折疊的 margin 中有正值，有負值

5.Collapsing margins 解決方法

1.margin 屬性的簡單介紹

在介紹margin之前，先剖上一張W3C標準盒模型的圖片，以便讀者可以查看相關位置。

margin，顧名思義，叫做外邊距。

margin的基本屬性有以下幾點

a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的簡寫，表明 margin 的大小范圍。

b：margin 值可以是 寬度值、百分比值或 'auto' 這3者之一。注意，margin 必須帶有單位，單位可以是像素、英寸、毫米或 em。

c：margin 百分比值是相對于父元素的 width 計算的。

d：當 margin 為 margin:10px 時，表示 top,right,bottom,left (逆時針)方向都是10px；當 margin 為 margin:10px 20px 時，表示上下方向為10px，左右方向為20px；當 margin 為 margin:10px 20px 5px 時，表示top方向為10px，左右方向為20px，bottom方向為5px；當 margin 為 margin:1px 2px 3px 4px 時，表示top方向為1px，right方向為2px，bottom方向為3px，left方向為4px。

上面通過對 margin 的簡單介紹，我們知道 margin 的百分比值是相對于父元素的 width 計算的，但是普通流和絕對定位元素的margin的計算是又是不相同的。

1.1：普通流的 margin 百分比設置

在普通流元素中，margin 百分比值得計算是依據其父元素的 width 計算的。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表