margin重叠通常特性：
margin重叠三种情况：
demo 1:
1.相邻兄弟元素margin重叠
兄弟元素的上下margin发生了重叠
2.父级和第一个/最后一个子元素
demo 1:
inline元素（内联元素，像图片、文字这样的东西）
块状格式化上下文元素（BFC元素）
同样可以利用父子margin重叠条件来去除margin重叠：
demo 2：
demo 2 :
demo 2:
去掉margin-bottom重叠与上面类似。
3.空的block元素margin重叠：
空的block元素发生margin重叠，也需要一些条件限制：
去掉空的block元素的margin重叠也是利用上面的条件：
3.margin重叠的计算规则：
1、正正取大值：
2、正负值相加：
3、负负最负值（取绝对值大的）：
首先理解margin atuo的作用机制 ，先看一些事实例子：
1.元素有时候，就算没有设置width或height，也会自动填充外部容器
例1:
例2：
以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。
若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。
总之一句话，auto就是用来分配。
通过以上的例子，很多事情就很好理解了，比方说：
1.为什么图片设置了 margin：0 auto 不水平居中？
如上图，设置了 margin auto ，图片为什么还是不居中呢？
因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足 margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。要想让它居中也很简单：
2.为什么明明容器定高，子元素也定高了， margin auto 0 无法垂直居中?
上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？
因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？很显然不满足，也就没有剩余空间，所以设置 height:100px margin auto 不会垂直居中。
还需要注意一点：用 margin:auto 来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置 margin：auto 它是不居中的。
那么如何实现垂直方向上的剧中呢，方法很多不止一种：
1.writing-mode与垂直居中：
更改流为垂直居中之后，内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。
2.绝对定位元素实现垂直居中：
子元素设置了 top:0right:0bottom:0left:0之后，没有设置宽高，absolute元素也自动填满了容器。
1.margin负值下的两端对齐（主要利用了margin可以改变元素尺寸这一特性：正直变小，负值变大）
由于 <div class="ul"></div>没有设置宽度，所以设置了 margin-right:-20px后，改变了它的宽度，增大了20px，变为1220px。这时我们再把 li 的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。 主要利用了margin负值增加它的空间 。
demo：
可以看出它的垂直方向是没有margin的，是无效的。
2.第二种常见的无效是margin重叠，比如你设置了margin-top当发现没有效果，这就是margin重叠带来的影响。
3.display:table-cell与margin
demo:
可以看出设置的margin是无效的。
但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。
4.position：absolute与margin，绝对定位元素非定位方向的margin值 “无效” ，定位方向的margin值是有效的。
margin取负值之后，例如margin-top:-1px元素会从父框架的顶部突出一个像素，如果父框架设置了overflow:visibled的话，这个元素就会看起来显示在父框架外面了,如果取了正值，例如margin-top:1px元素就是距离父框架的顶部一个像素，会在父框架内显示。
padding取了负值之后是没有任何效果的，浏览器会认为padding:0。如果padding取正值，就是在元素内部填充，这个很好理解。position取了负值之后的效果和margin差不多，只是position通常是应用绝对定位场景的，而margin通常是应用在相对定位场景的，而且position可以定义z轴上的位置关系，但是margin一般是不可以的，两个的区别主要是在这个方面，至于取负值，在视觉上其实没有什么太大的区别。
其实你把ul和li都加上背景色就能看出端倪来的：
如果li的margin-top是正值（为了看得明白些，我用的是10px），是这样的：
红色部分是ul，蓝色则是li，最上面的黄色部分则是第一个li的margin-top（也就是10px），它是凸出在ul的外面的，这也就是说，如果margin-top是正值，则第一个li的位置会保持不变，从第二个li开始才是逐渐向下拉伸的（值得一提的是：如果li的margin-top大于ul的margin-top，则ul会以li的margin-top作为基准向下推，这时候第一个li就不会保持位置不变了）。
而当li的margin-top是负值时（比方说-10px），情况就不是这样了，第一个li会向上移动10px，而第二个li则移动20px，依此类推，连带着整个ul也会向上移动10px。
