margin

1. margin 与容器尺寸

两种容器尺寸：

1. 可视尺寸：含 border 及以内的尺寸—— clientWidth、clientHeight（标准）
2. 占据尺寸：含 margin 及以内的尺寸—— outerWidth、outerWidth（非标准，YY）

1.1. margin 与可视尺寸

生效条件：

1. 适用于没有设定 width/height 的普通 block 水平元素（float 就不行）。
2. 只适用于水平方向尺寸（这种情况就不考虑设置 height 的情况了）。

1.2. margin 与占据尺寸

1. block/inline-block 水平元素均适用
2. 与有没有设置 width/height 值无关
3. 适用于水平方向和垂直方向
   例子是：修改子元素的 margin-bottom: -30px，则父元素的高度减少 30px。
   实例：实现滚动容器上下留白的效果。如果通过在滚动容器上使用 padding 来实现，会发现在非 Chrome 浏览器下，底部 padding 不见了。所以通过在子元素上设置 margin 来实现。

2. margin 与百分比属性值

计算规则：

1. 普通元素：无论水平方向还是垂直方向都是相对于容器的 width 来计算的
2. 绝对定位元素：相对于第一个具有定位属性的祖先元素(relative/absolute/fixed)的 width 计算的

特性实例：

1. 宽高 2:1 自适应布局

.container {
  /* overflow: hidden 是为了避免发生 margin 重叠的现象 */
  overflow: hidden;
}
.container>div {
  margin: 50%;
}
 /* 垂直方向通过 margin 重叠，导致高度只有 50%；而宽度始终是 100% */

  

3. margin 重叠

通常特性

1. margin 重叠只发生在 block 水平元素（不包括 float 和 absolute 元素）
2. 不考虑 writing-mode，只发生在垂直方向上（margin-top/margin-bottom）

margin 重叠的 3 种情形

1. 相邻的兄弟元素
2. 父级和第一个（或最后一个）子元素。这时子元素不会把父元素撑开，其表现为子元素的 margin 赋给了父元素，父元素位置改变。父子 margin 重叠的其他条件：

对于 margin-top 重叠

• 父元素非 BFC 元素
• 父元素没有 border-top 设置
• 父元素没有 padding-top 值
• 父元素和第一个子元素之间没有 inline 元素分隔

对于 margin-bottom 重叠

• 父元素非 BFC 元素
• 父元素没有 border-bottom 设置
• 父元素没有 padding-bottom 值
• 父元素和最后一个子元素之间没有 inline 元素分隔
• 父元素没有 height, min-height, max-height 限制

3. 空的 block 元素
   发生重叠的条件：

• 元素没有 border 设置
• 元素没有 padding 值
• 里面没有 inline 元素
• 没有 height 和 min-height

margin 的计算规则

1. 正正取大值
2. 正负值相加
3. 负负取小值

4. margin: auto

元素有时候，就算没有设置 width/height，也会自动填充满整个容器。
比如：

1. 普通水平块元素 div
2. position: absolute; left: 0; right: 0; （top: 0; bottom: 0; 可填充高度）

如果设置了 width/height，自动填充特性就会被覆盖。原本应该填充的尺寸被 width/height 强制变更，而 margin: auto 就是为了填充这个变更的尺寸设计的。

4.1 计算规则

1. 如果一侧是 auto，另一侧非 auto，则设置 auto 一侧的 margin 为剩余空间大小。
2. 如果两侧都是 auto，则平分剩余空间大小。

4.2 实例

1. 实现水平居中。但是如果计算后的 margin 为负值，则元素不能水平居中。

5. margin 负值定位

5.1 实例

1. 如果能自动填充的元素没有设置 width/height，通过设置 margin 为负值，相当于增加了容器的 width/height。

2. 实现两列等高布局
   副作用：貌似会在移动端 focus 的时候重定位 scroll 导致页面飞掉(由于设置了 overflow: hidden )，mark 一下....

   
   
   

   通过 margin 和 padding 实现两列登高布局

3. 使用 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 属性的拖累，图片位置被限制了。

效果图