1、margin与容器尺寸
元素尺寸：①可视尺寸 clientWidth（标准）；②占据尺寸
margin与可视尺寸：①适用于没有设定width/height的普通block元素；②只适用于水平方向尺寸
margin与占据尺寸：①block/inline-block水平元素均适用；②与有没有设定width/height无关；③适用于水平方向和垂直方向。可用于页面的上下留白（padding兼容性不好）。
2、margin与百分比单位
普通元素的百分比：相对于容器宽度计算。
绝对定位元素的百分比：相对于第一个定位的祖先容器的宽度计算的。
3、margin重叠
margin重叠通常特性：①仅发生在block水平元素上（不包括float和absolute元素）；②不考虑writing-mode的情况下，只发生在垂直方向上。
margin重叠的情境：①相邻的兄弟元素；②父级的第一个/最后一个子元素；③空的block元素
4、margin重叠的计算规则
正正取大值；正负值相加；负负最负值。
margin的善用实例：
5、理解margin:auto
规则：如果一侧是定值，一侧是auto，则auto是剩余空间大小；如果两侧均为auto，则平分剩余空间。
writing-mode与垂直居中（这样修改后宽度的margin:auto居中效果就会失效）：
绝对定位元素的margin居中：
6、margin负值定位
margin负值下的两端对齐：
margin负值下的等高布局：
margin负值下的两栏自适应布局：
7、margin失效情形解析
⑴ inline水平元素的垂直margin无效前提：①非替换元素，例如不是<img>元素；②正常书写模式。
⑵ margin重叠
⑶ display:table-cell与margin：display:table-cell/display:table-row等声明的margin无效。
⑷ position:absolute与margin：绝对定位元素未设置定位方向的margin值”无效“。例如，img{top:10%}的margin-top有效其他均无效。
⑸ 鞭长莫及导致的margin无效。
⑹ 内联特性导致的margin无效：
8、了解margin-start/margin-end等属性
margin-start：①正常的流向，margin-start等同于margin-left，两者重叠不累加；②如果水平流是从右向左，margin-start等同于margin-right；③在垂直流下（writing-mode:vertical-*;），margin-start等同于margin-top。
margin-end：①正常的流向，margin-end等同于margin-right，两者重叠不累加；②如果水平流是从右向左，margin-end等同于margin-left；③在垂直流下（writing-mode:vertical-*;），margin-end等同于margin-bottom。
margin-collapse：控制margin重叠。collapse（默认-重叠），discard（取消，使margin无效），separate（分隔，无margin重叠）。