margin塌陷问题
现象
先上示例代码
<div class="warpper">
<div class="box"></div>
</div>
* {
padding: 0;
margin: 0;
}
.warpper {
height: 200px;
width: 200px;
background-color: gray;
}
.box {
height: 100px;
width:100px;
background-color: green;
}
两个嵌套的盒子如下所示
给嵌套在里面的子元素盒子摄设置一个margin-top值，我们的设想是子元素会相对于父元素向下移动，但是效果与我们想的却不太一样。
我们看到子元素是相对于浏览器的顶端向下移动了，仿佛父元素没有顶一样，这种现象我们就称之为margin塌陷。
解决方案
- 给父元素设置border。这种方法可以解决问题，但是在实际开发中不推荐，因为这样会破坏页面的样式；
- 使用bfc来解决。触发bfc有以下几种方式：
float的值不为none
overflow的值不为visible
display的值为table-cell、tabble-caption和inline-block之一
position的值不为static或者releative中的任何一个
根据业务需求任选一种方式设置到父元素中，就可以解决margin塌陷问题；根据业务需求任选一种方式设置到父元素中，就可以解决margin塌陷问题； - 给父元素加一个padding。这种方式也不推荐，道理和第一条一样。
修改后的代码如下:
* {
padding: 0;
margin: 0;
}
.warpper {
height: 200px;
width: 200px;
background-color: gray;
overflow: hidden;
}
.box {
margin-top: 100px;
height: 100px;
width:100px;
background-color: green;
}
margin合并问题
margin塌陷问题是父子级元素之间的bug，现在来看另一个经典的bug–margin合并问题。与margin塌陷不同，margin合并是兄弟级元素之间的bug。
先上代码
<body>
<div class="demo1">1</div>
<div class="demo2">2</div>
</body>
-----------------------------------------------------------------------
* {
padding: 0;
margin: 0;
}
.demo1 {
background-color: gray;
}
.demo2 {
background-color: red;
}
效果如图所示：
我们给上面的div加一个下边距100px，给下面的div加一个上边距200px，根据设想，此时两个div的间距应该是300px。但是经过实验后我们发现两个div之间的距离还是只有200px。
* {
padding: 0;
margin: 0;
}
.demo1 {
background-color: gray;
margin-bottom: 200px;
}
.demo2 {
background-color: red;
margin-top: 100px;
}
这就是margin合并问题。即所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决方法有两种，第一种是直接改变其中一个外边距的值，使之达到想要的效果（推荐使用）；另外一种解决方式是将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)。
3841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
