margin部分知识点整理

关于margin值为百分比时的参照元素：

1.普通元素百分比margin都是相对于容器宽度计算的
2.绝对定位元素的百分比margin是相对第一个定位祖先元素（relative、absolute，fixed）的宽度计算的，不管是垂直还是居中

margin重叠通常特性:

1. 只发生在block水平元素（不包括flaot和absolute元素）
2. 不考虑writing-mode，只发生在垂直方向

margin重叠3种情况

1. 相邻的兄弟元素
2. 父级和第一个子元素
3. 父级和最后一个子元素

margin设置成auto在什么情况下有效

我们可以这么理解：auto是用来分配剩余容器空间的，即如果该元素在没有设定宽高时，使用auto后可以自动填满容器，那么在设定宽高后就可以实现居中效果，即这样可以解释为什么图片元素设置margin ： 0 auto不居中，因为图片是inline水平，就算没有width，它也不会占据整个容器，设置图片display为block就可以居中了。
设置position为absolute后，再设置top:0 right:0 bottom:0 left:0可以使容器自动填满整个包含块，这样再给该元素设置width/height后，剩下的部分就是可以使用auto自动分配的，即就可以自动居中了

margin无效的几种情况

1. inline水平元素的垂直margin无效