一. 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. 計算規則
正正取大值
正負值相加
負負最負值
4. margin重疊的解決方法
4.1 相鄰兄弟元素的重疊
最簡單的方法是，使用同方向的margin，即a盒子margin-bottom: 50px，b盒子margin-top: 100px，直接用b盒子margin:150px就行了，不用使用兩個方向的margin。
4.2 父子元素的重疊
4.2.1 給父元素新增乙個before偽元素，.father:bofore，content中有個空格
4.2.2 將父元素做成bfc，例如overflow:hidden
4.2.3 對父元素使用padding-top，不使用margin
4.2.4 將父元素定位，例如，position:fixed
三. margin auto
margin的值為auto，是自動佔據包含塊的剩餘空間，例如
<div
id="demo"
>
<
p>恩，我就是那個p。
p>
div>
#demo#demo p
則p的實際margin-left為500-100=400px，p元素右對齊
當margin-left和margin-right同為auto時,左右平分剩餘空間，元素居中
參考：
margin之百分比
我們以乙個問題開始 假設乙個塊級包含容器，寬1000px，高600px，塊級子元素定義 margin 10 5 大家說說 margin 的 top,right,bottom,left 計算值最終是多少？我記得得到不少 100px 30px 100px 30px 的反饋，我們來還原 css demo ...
margin和pading的百分比值
對元素的margin設定百分數時，百分數是相對于父元素的width計算，不管是margin top margin bottom還是margin left margin right。padding的原理也是一樣的。為什麼margin top margin bottom的百分數是相對於width而不是h...
margin之百分比（二）
在 margin系列之keyword auto 中，說過了margin值為auto的情況，這次要聊的是值為百分比的情形。我必須承認這是乙個非常基礎的知識點，但有一段時間我發現很多人對此有錯誤的認知。偶爾在面試或者分享的時候，我會問到這個問題，有人會脫口而出的告訴我他對此的感性理解。或許現在大多數人對...