margin特性深入分析與總結

標籤：

今天寫了個小demo，總體不難，但一些細節需要注意：

1）如所示，藍色地區為白色box的padding，橙色地區為每條資料項目的margin-bottom，那麼如何解決最後一條記錄margin-bottom佔位的問題？

2）如所示，設定外層box border為1px，設定每一行的border-bottom為1px，那麼如何解決最後一行border-bottom與box border-bottom緊貼，顯示2px border的問題？

為解決上面的問題，需要理解margin自身的一些特性，下面對margin進行總結，以便以後回顧與尋找。

區塊層級元素外邊距（1）兩個【上下相鄰】且【不浮動】的區塊層級元素間，兩元素間的垂直外邊距（margin）為相鄰外邊距中的較大者（合并）。margin：20pxmargin：30px如：橙色元素margin-bottom為20px，灰色元素margin-top為30px，則兩元素之間的垂直外間距為較大者30px（2）兩個【相鄰】且【浮動】的區塊層級元素間，兩元素間的外邊距（margin）為相鄰外邊距之和（不合并）。margin：20pxmargin：20px如：橙色元素margin-right為20px，灰色元素margin-left為20px，則兩元素之間的外間距相鄰邊距之和40px行內元素外邊距（1）行內元素不佔上下外邊距。margin：0px margin：30px如：橙色元素margin為0px，灰色元素margin為30px，但兩元素水平顯示，上下左右邊距並未發揮作用（2）行內元素左右外邊距不會合并。margin：20px margin：30px如：橙色元素margin為20px，灰色元素margin為30px，兩元素間的外邊距約為相鄰外邊距之和50px（不合并），事實上即使兩行內元素間沒有水平邊距也不會完全緊貼負margin

• margin輔助線：即margin移動的基準線，此基準線相對於box是靜止的，而margin的數值，就是box相對於輔助線的位移量
• 1、top、left輔助線：設定了margin的元素：（1）以父級元素content的上（左）邊為輔助線，自身向下（右）移動（2）以相鄰元素margin的下（右）邊為輔助線，自身向下（右）移動
• 2、bottom、right輔助線：設定了margin的元素：（1）以元素本身border的下（右）邊為輔助線，與其相鄰的元素向下（右）移動
• 以上的位移方向為margin數值為正值時的情況，如果margin是負值，則位移方向相反
• 更多負margin使用案例，推薦閱讀：負值之美：負margin在頁面配置中的應用

Container1margin:-10px 20px -20px 40pxmargin:0 如：Container1中，兩個元素為【不浮動】的區塊層級元素。
※修改橙色元素的margin-top，會影響橙色元素相對於Container1向上或向下移動；
※修改橙色元素的margin-bottom，會影響黃色元素相對於橙色元素向上或向下移動
同時注意：DOM結構中後面的元素會疊加在前面元素的上面 Container2 margin:-10px -20px -20px 40px margin:0 如：Container2中，兩個元素為【浮動】的區塊層級元素。
※修改橙色元素的margin-left，會影響橙色元素相對於Container2向左或向右移動；
※修改橙色元素的margin-right，會影響黃色元素相對於橙色元素向左或向右移動 百分比margin

• 元素margin為百分比時，會根據其父元素的【寬或高】來計算margin的四個具體值
• 1、橫向顯示（預設）：基於父元素的【寬度】的百分比計算外邊距
• 2、縱向顯示：基於父元素的【高度】的百分比計算外邊距（測試writing-mode這玩意只有IE能使，IE5就有，並且到IE11還堅挺的支援著）

Demo1：父元素橫向顯示margin: 10% 5%
如：Demo1中：
margin-left、margin-right=$Demo1.width()*5% = 25px;
margin-top、margin-bottom= $Demo1.width()*10% = 50px Demo2：父元素縱向顯示（切換為IE測試）margin: 10% 5% 如：Demo2中：
margin-left、margin-right=$Demo1.height()*5% = 10px;
margin-top、margin-bottom= $Demo1.height()*10% = 20px  最後附上demo源碼，一些細節有待改進：http://runjs.cn/code/dn7ibwnt

margin特性深入分析與總結