深入理解margin

1.margin与百分比单位

在非定位的元素时，元素的margin都是相对于父元素的宽度。

在定位元素使用时，元素的margin相对于最近有定位属性的父元素的宽度。

2.margin重叠

margin重叠的三种情况

• 相邻兄弟元素
• 父元素与第一个或者最后一个子元素
• 空的block元素

3.margin：auto

auto用于分配剩余空间，所以可以使用margin：0 auto；来使元素水平居中，但是需要注意的是这种方式只对display：block；的元素适用。

可以得出的一个结论就是，如果不设置宽度元素的宽度自动会填充容器的宽度的元素就可以使用margin：auto；来水平居中

但是margin：auto；不能垂直居中，因为不设置宽度高度不会自动填充。

如何使用margin来实现垂直居中

• writing-mode
  
• absolute与margin（IE7以上）
  
  最后总结一下：margin：auto；用来分配剩余的空间，如果相对的两个margin都设置auto可以实现居中，但是前提是：如果不设置宽度，或者高度，宽度和高度会自动填充

4.margin负数

5.margin失效

• inline水平元素的垂直margin无效
• margin重叠情况
• display:table-cell/display:table-row；声明margin失效，但是替换元素例外
• 绝对定位元素非定位方向的margin值”无效“

6.margin-start和margin-end