1. margin 与容器尺寸
两种容器尺寸：
- 可视尺寸：含 border 及以内的尺寸—— clientWidth、clientHeight（标准）
- 占据尺寸：含 margin 及以内的尺寸—— outerWidth、outerWidth（非标准，YY）
1.1. margin 与可视尺寸
生效条件：
- 适用于没有设定 width/height 的普通 block 水平元素（float 就不行）。
- 只适用于水平方向尺寸（这种情况就不考虑设置 height 的情况了）。
1.2. margin 与占据尺寸
- block/inline-block 水平元素均适用
- 与有没有设置 width/height 值无关
- 适用于水平方向和垂直方向
例子是：修改子元素的 margin-bottom: -30px，则父元素的高度减少 30px。
实例：实现滚动容器上下留白的效果。如果通过在滚动容器上使用 padding 来实现，会发现在非 Chrome 浏览器下，底部 padding 不见了。所以通过在子元素上设置 margin 来实现。
2. margin 与百分比属性值
计算规则：
- 普通元素：无论水平方向还是垂直方向都是相对于容器的 width 来计算的
- 绝对定位元素：相对于第一个具有定位属性的祖先元素(relative/absolute/fixed)的 width 计算的
特性实例：
- 宽高 2:1 自适应布局
.container {
/* overflow: hidden 是为了避免发生 margin 重叠的现象 */
overflow: hidden;
}
.container>div {
margin: 50%;
}
/* 垂直方向通过 margin 重叠，导致高度只有 50%；而宽度始终是 100% */
<div class="container">
<div />
</div>
3. margin 重叠
通常特性
- margin 重叠只发生在 block 水平元素（不包括 float 和 absolute 元素）
- 不考虑 writing-mode，只发生在垂直方向上（margin-top/margin-bottom）
margin 重叠的 3 种情形
- 相邻的兄弟元素
- 父级和第一个（或最后一个）子元素。这时子元素不会把父元素撑开，其表现为子元素的 margin 赋给了父元素，父元素位置改变。父子 margin 重叠的其他条件：
对于 margin-top 重叠
- 父元素非 BFC 元素
- 父元素没有 border-top 设置
- 父元素没有 padding-top 值
- 父元素和第一个子元素之间没有 inline 元素分隔
对于 margin-bottom 重叠
- 父元素非 BFC 元素
- 父元素没有 border-bottom 设置
- 父元素没有 padding-bottom 值
- 父元素和最后一个子元素之间没有 inline 元素分隔
- 父元素没有 height, min-height, max-height 限制
- 空的 block 元素
发生重叠的条件：
- 元素没有 border 设置
- 元素没有 padding 值
- 里面没有 inline 元素
- 没有 height 和 min-height
margin 的计算规则
- 正正取大值
- 正负值相加
- 负负取小值
4. margin: auto
元素有时候，就算没有设置 width/height，也会自动填充满整个容器。
比如：
- 普通水平块元素 div
- position: absolute; left: 0; right: 0; （top: 0; bottom: 0; 可填充高度）
如果设置了 width/height，自动填充特性就会被覆盖。原本应该填充的尺寸被 width/height 强制变更，而 margin: auto 就是为了填充这个变更的尺寸设计的。
4.1 计算规则
- 如果一侧是 auto，另一侧非 auto，则设置 auto 一侧的 margin 为剩余空间大小。
- 如果两侧都是 auto，则平分剩余空间大小。
4.2 实例
- 实现水平居中。但是如果计算后的 margin 为负值，则元素不能水平居中。
5. margin 负值定位
5.1 实例
如果能自动填充的元素没有设置 width/height，通过设置 margin 为负值，相当于增加了容器的 width/height。
-
实现两列等高布局
副作用：貌似会在移动端 focus 的时候重定位 scroll 导致页面飞掉(由于设置了 overflow: hidden )，mark 一下....
通过 margin 和 padding 实现两列登高布局 使用 margin 负值实现两栏自适应布局
同 float 实例：
使用 margin 负值实现两栏自适应布局
6. margin 失效情形
1. inline 元素垂直方向 margin
失效前提条件：
- 非替换元素，如 img
- 正常书写模式 writing-mode
2. margin 重叠
3. display: table-cell 与 margin
当 display 设置为 table-* 值时，margin 无效。
4. 绝对定位元素非定位方位的 margin 值“无效”
这里的“无效”是指：对绝对定位元素非定位方位设置 margin 值，对元素的定位是没有影响的，但是实际上 margin 还是改变了元素的“占据尺寸”的，即 margin 是有效的。
5. 鞭长莫及
实际上是因为：margin-left 不够大。
效果图
6. 内联特性导致 margin 无效
如图，无论再怎么减小 margin-top 的值，图片的位置都不会改变。
原因是：图片含内联特性，由于 vertical-align 默认为 baseline 对齐；由于内容 x 不会跑到容器外面去，所以受到 vertical-align 属性的拖累，图片位置被限制了。
效果图
