margin詳解

一. margin對尺寸的影響

1.可視尺寸

a.適用於沒有設定width/height的普通block水平元素
float元素、absolute/fixed元素、inline元素、table-cell元素都不能夠
b.只適用於水平方向尺寸，能夠改變可視尺寸

應用：

a.一側定寬的自適應佈局。
HTML：

<div class="left"></div>
    <div class="right">一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局一側定寬的自適應佈局
    </div>

CSS:

.left{height:200px;width:200px;background:blue;float:left;}
.right{margin-left:300px;}

b.兩端對齊佈局
見下文負margin部分。

2.佔據尺寸

1. block/inline-block水平元素均適用

2. 與有沒有設定width/height值無關

3. 適用於水平方向和垂直方向

應用

a.滾動容器內上下留白
demo: codepen傳送門
b.等高佈局
見下文負margin部分。

二. margin的賦值

1. 普通元素的百分比margin都是相對於容器的寬度計算。

2. 絕對定位元素的百分比margin，絕對定位元素的百分比margin是相對於第一個定位祖先元素（relative/absolute/fixed）的寬度計算

應用

寬高2：1自適應矩形
demo: codepen傳送門
之因此會是2：1，是由於垂直方向上margin發生重疊。

三. margin重疊

1. 一般特性：

1. block水平元素（不包括float和absolute元素）

2. 不考慮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

1.一側定值，一側auto，auto爲剩餘空間大小
2.兩側均是auto，則平分剩餘空間（使用margin:0 auto;可以實現塊狀元素居中的緣由）
3.writing-model與垂直居中
writing-model能夠設置或檢索對象的內容塊固有的書寫方向，具體的能夠查看一下CSS參考手冊，vertical-lr指的是垂直方向自左而右的書寫方式，即top-bottom-left-right，再結合margin:auto; 就能夠實現垂直居中。
demo: codepen傳送門
4.對於絕對定位的元素，經過設置top:0;right:0;left:0;bottom:0;鋪滿整個頁面，再經過margin:auto完成水平垂直居中定位
demo: codepen傳送門

五. margin負值的應用

當元素margin的top和left是負值時會引發元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線

1.三欄佈局，能夠對父元素是使用margin-right:負值;完成左右對齊
demo: codepen傳送門

2.margin負值下的等高佈局
關鍵代碼：

.child{margin-bottom:-600px;padding-bottom:600px;}

demo: codepen傳送門
3.兩欄佈局
能夠看看float佈局那篇文章:不改變DOM樹前後順序的方法

六. margin失效

1. inline元素

   非替換元素，不是img元素
   正常書寫模式

2. margin重疊

3. display:table-cell/display:table-row等聲明的margin無效
   替換元素除外，firefox：table-cell類型inline-block的渲染行爲

4. 絕對定位元素非定位方位的margin值‘無效’，一直有效，可是脫離文檔流。

5. 因爲float致使須要增長的邊距增長

6. 內聯特性致使的margin無效

七. 新特性

1. margin-star&margin-end

1. 正常的流向，margin-start等同於margin-left，二者重疊不累加

2. 若是水平流從右往左，margin-start等同於margin-right

3. 若是垂直流，margin-start等同於margin-top

2. 其餘特性

margin-before：默認margin-top；
margin-collapse：能夠取消重疊等等

八. 參考資料

1. 張鑫旭《CSS深刻理解之margin》

2. 我知道你不知道的負Margin

3. The Definitive Guide to Using Negative Margins