css margin塌陷问题

1. 垂直并列

   先设置两个div，并分别设置宽高背景色。

 
 
box1
 
box2

挨着不太好看，在原来样式的基础上给两个div设置margin
box1设置margin-bottom：40px；
box2设置margin-top：20px；

.box1 {
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
        margin-bottom: 40px;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: brown;
        margin-top: 20px;
    }

按照正常的思维40+20 = 60，所以box1和box2的边距应该是60px，但实际结果如下。

两个div的边距只有40px，并不是想象中的60，因此可以得出一下结论：处于上下并列的两个div，当想要分别设置其margin-bottom和margin-top属性来改变他们的间距时，取它们中的最大值作为两者之间的间距，如box1的margin-bottom：40px；box2的margin-top：20px；则取box1的margin-bottom：40px；作为两者的间距。

2. 嵌套关系
   设置一个div，里面嵌套着另一个div，分别设置相对应的宽高和背景色。

给子元素设置margin-top：20px；使其和父元素不要挨得那么近。

结果还是未如能所愿，子元素和父元素的间距并不能成功设置，反而父元素与子元素一起与页面顶端产生了20px间距。

解决这个问题有如下方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border: 1px solid transparent）
（2）为父盒子添加overflow: hidden;
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）利用伪元素给子元素的前面添加一个空元素

.box1:before{ content:"";
             overflow:hidden; }