一 margin与可视尺寸 （适用场景 一侧定宽的自适应布局）
1.适用于每月设定width/height的普通block水平元素
2.只适用于水平方向尺寸
二 margin与占据尺寸 （适用场景 滚动容器内上下留白）
1.block/inline-block水平元素均适用
2.与有没有设定width/height值无关
3.适用于水平方向和垂直方向
三 百分比margin的计算规则 （适用场景 宽高2:1自适应矩形）
1.普通元素的百分比margin都是相对于容器的宽度计算的
2.绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的。
四 margin重叠
a.margin重叠通常特性
1.block水平元素（不包括float和absolute元素）
2.不考虑writing-mode(书写格式),只发生在垂直方向（margin-top/margin-bottom）
b.margin重叠3种情境
1.相邻的兄弟元素
2.父级和对一个、最后一个子元素
扫描二维码关注公众号，回复：
1463164 查看本文章
3.空的block元素
c.margin-top重叠
1.父元素非块状格式化上下文元素
2.父元素没有border-top设置
3.父元素没有padding-top值
4.父元素和第一个子元素之间没有inline元素分隔
d.margin-bottom重叠
1.父元素非块状格式化上下文元素
2.父元素没有border-bottom设置
3.父元素没有padding-bottom值
4.父元素和第后一个子元素之间没有inline元素分隔
5.父元素没有height,min-height,max-height限制
e.空block元素margin重叠其他条件
- 1.元素没有border设置
2.元素没有padding值
3.里面没有inline元素
4.没有height,或者min-height
f.重叠计算规则
1.正正取大值
2.正负值相加
3.负负最负值
g.善用margin重叠
1.更具有健壮性，最后一个元素移除或位置调换，均不会破坏原来的布局
.list{
margin-top :15px;
margin-bottom:15px;
}
五 marign的auto
a.block元素
b.writing-mode与垂直居中
c.absolute与margin居中
六 css margin 负值定位
1.margin负值下的两端对齐
2.margin负值下的等高布局
3.margin负值下的两栏自适应布局
七 CSS margin无效情形解析
a.inline水平元素的垂直margin无效
1.非替换元素
2.正常书写模式