<style>
.box{
width: 1200px;
height: 400px;
background-color: pink;
overflow: hidden;
/* 外边距塌陷的解决方案;
1.给父元素添加边框
2.给父元素设置一个属性overflow:hidden */
}
.box_1{
/* 3.如果需要改变盒子的位置需要使用外边距
外边距垂直塌陷:当给子元素设置margain-top 的时候父元素页往下移动 */
width: 1200px;
height: 300px;
background-color: deeppink;
margin-top: 100px;
}
/* box_2和box_3垂直外边距合并 当给margain-top margain-bottom 的时候会发生外边距合并那么之间的值不会合并运算 只会为最大值显示 */
.box_2{
margin-bottom: 30px;
width: 1200px;
height: 100px;
}
.box_3{
margin-bottom: 30px;
width: 1200px;
height: 100px;
margin-top: 30px;
}
</style>
</div>
</div>
<div class="box">
<div class="box_2">
</div>
<div class="box_3">
</div>
</div>