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