一. margin百分比
1. 普通元素的百分比margin都是相對於容器的寬度計算
2. 絕對定位元素的百分比margin是相對於第一個定位祖先元素（relative/absolute/fixed）的寬度計算
這是在預設的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況下，
若書寫模式變成縱向的時候，其參照將會變成包含塊的高度。
二. margin重疊
1. 通常特性
block水平元素（不包括float和absolute元素）
不考慮writing-mode，只發生在垂直方向（margin-top/margin-bottom）
2. 重疊的3種情境
A.相鄰的兄弟元素
B. 父級和第一個/最後一個子元素
子元素的margin-top相當於父元素的margin-top
a.margin-top重疊
父元素非塊狀格式化上下文元素
父元素沒有border-top設定
父元素沒有padding-top值
父元素和第一個子元素之間沒有inline元素分隔
b.margin-bottom重疊
父元素非塊狀格式化上下文設定
父元素沒有border-bottom設定
父元素沒有padding-bottom值
父元素和第一個子元素之間沒有inline元素分隔
父元素沒有height，min-height，max-height
C.空的block元素
元素沒有border設定
元素沒有padding值
裡面沒有inline元素
沒有height或者min-height
3. 計算規則
正正取大值
正負值相加
負負最負值
三. margin auto
margin的值為auto，是自動佔據包含塊的剩餘空間，例如
<div id="demo"> <p>恩，我就是那個p。</p> </div>
#demo{ width: 500px; } #demo p{ width: 100px; margin-left: auto; }
則p的實際margin-left為500-100=400px，p元素右對齊
當margin-left和margin-right同為auto時,左右平分剩餘空間，元素居中
參考：https://segmentfault.com/a/1190000006212076
http://www.ituring.com.cn/article/64580
http://www.ituring.com.cn/article/64581