CSS深入理解之margin

1. margin 与容器的尺寸

适用于没有设定 width / height 的普通 block 水平元素(float 元素，absolute / fixed 元素，inline 水平，table-cell 元素虽然 block 化，但是不是普通的 block 水平元素)
只适用于水平方向尺寸
一侧定宽的自适应布局

滚动容器内上下留白

外部容器设置 padding 值，只有 chrome 才会有留白，此时可以在给内部容器设置 margin 值

2. margin 与百分比单位

计算规则

普通元素的百分比 margin 都是相对于容器的宽度计算的，绝对定位元素的百分比 margin 是相对于第一个定位祖先元素(relative / absolute / fixed)的宽度计算的

应用-宽度 2:1 自适应矩形

由于 margin 百分比的计算规则是相对于容器进行计算的，而 margin 又可以影响普通 block 水平元素的可视尺寸，所以当设置为 margin: 50% 时，由于 margin 重叠特性，所以会让元素的宽高始终保持 2:1 的比例

3. margin 重叠

通常特性

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

3 种情境

相邻的兄弟元素

父级和第一个 / 最后一个子元素

下面这3种书写形式的效果是相同的，都是子元素向下偏移了 80px，而父级的尺寸并没有改变

父子 margin 重叠的其他条件

margin-top 重叠：

父元素非块状格式化上下文元素
父元素没有 border-top 设置
父元素没有 padding-top 值
父元素和第一个子元素之间没有 inline 元素分隔

margin-bottom 重叠：

父元素非块状格式化上下文元素
父元素没有 border-bottom 设置
父元素没有 padding-bottom 值
父元素没有和最后一个子元素之间没有 inline 元素分隔
父元素没有 height，min-height，max-height 限制

空的 block 元素

空的 block 元素 margin 重叠其他条件：

元素没有 border 设置
元素没有 padding 值
里面没有 inline 元素
没有 height，或者 min-height

margin 重叠计算规则

正正取大值：50 和 20 –> 50
正负值相加：50 和 -20 –> 30
负负最负值：-50 和 -30 –> -50

margin 重叠的意义

连续段落或列表之类，如果没有 margin 重叠，首尾项间距会和其他兄弟标签 1:2 关系，排版不自然
web 中任何地方嵌套或直接放入任何裸 div，都不会影响原来的布局
遗落的空任意多个 <p> 元素，不要影响原来的阅读排版

善用 margin 重叠

4. margin auto

如果一侧定值，一侧 auto，auto 为剩余空间大小；如果两侧都是 auto，则平分剩余空间(居中显示)，但是不能计算负值

writing-mode 与垂直居中

更改流为垂直方向，实现垂直方向的 margin: auto 居中

.father {
  height: 200px;
  width: 100%;
  writing-mode: vertical-lr;
}
.son {
  height: 100px;
  width: 500px;
  margin: auto;
}

absolut 与 margin 居中

top:0; right:0; bottom:0; left:0; 会使子元素的宽度和高度拉伸到与父元素相同大小，当没有 width / height 属性时，absolute 元素自动填满了容器；但设置了 width / height 属性后，会限制 absolute 元素自动填满容器，此时 margin: auto 就会自动平分被变更的尺寸空间，从而实现子元素的水平垂直居中

.father {
  height: 200px;
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 100px;
  margin: auto;
}