margin塌陷问题
在web开发中,你是否在开发中出现了margin塌陷的类似问题,你是如何解决的呢? 况且你是否真的明白margin塌陷的原理是什么?
margin塌陷问题主要是这种情况,当你在写嵌套盒子的时候,如果你想让里面嵌套的小盒子上边距向下调整时,如果不加任何样式设置的话, 当给里面子元素设置向下边距时,它就会“穿透”外面的父级元素,使其带动父元素会一起向下移动,那么这样就造成了margin塌陷的问题。
深度研究的话,其实盒子的初始状态是标准的盒子,当想让它触发了BFC规范以后,形成了相对独立的容器,是不会受外其他外界影响的。
下面看一个引发 maigin塌陷的dome:
<style>
body{
border: 3px solid rgb(3, 3, 3);
}
div.fbox{
width: 300px;
height: 300px;
background-color: pink;
}
div.cbox{
width: 150px;
height: 150px;
background-color: green;
margin-top: 30px; /*给子元素添加外上边距*/
}
</style>
<body>
<div class="fbox">
<div class="cbox">子元素</div>
</div>
</body>
当浏览器渲染出来的时,会出现这样情况,子元素并没有下来,而是带动它父元素一并下来的,如图:
添加样式后的效果:
效果明显看出,已经出现了类似的问题。那么这样问题又该如何解决呢?
类似这样的问题,可以有以下几种解决办法:
第一:
给父元素添加一个上边框(border-top),这样子元素就会依据父元素的上边框,来移动子元素自身的margin-top。
<style>
body{
border: 3px solid rgb(3, 3, 3);
}
div.fbox{
width: 300px;
height: 300px;
background-color: pink;
/*第一种解决办法*/
border-top: 1px solid transparent;
/*给父元素添加上边框线为透明色*/
}
div.cbox{
width: 150px;
height: 150px;
background-color: green;
margin-top: 30px; /*给子元素添加外上边距*/
}
</style>
<body>
<div class="fbox">
<div class="cbox">子元素</div>
</div>
</body>
效果:明显解决问题!
第二:
给父元素添加overflow:hidden 属性,也ok的。
<style>
body {
border: 3px solid rgb(3, 3, 3);
}
div.fbox {
width: 300px;
height: 300px;
background-color: pink;
/*第一种解决办法*/
/* border-top: 1px solid transparent; */
/*给父元素添加上边框线为透明色*/
/*第二种解决办法*/
overflow: hidden;
/*给父元素添加 overflow: hidden属性 */
}
div.cbox {
width: 150px;
height: 150px;
background-color: green;
margin-top: 30px; /*给子元素添加外上边距*/
}
</style>
<body>
<div class="fbox">
<div class="cbox">子元素</div>
</div>
</body>
效果:同样解决问题!
第三:
可以把元素进行类型转换,将display属性设置成 inline-block,方可解决。
<style>
body {
border: 3px solid rgb(3, 3, 3);
}
div.fbox {
width: 300px;
height: 300px;
background-color: pink;
/*第一种解决办法*/
/* border-top: 1px solid transparent; */
/*给父元素添加上边框线为透明色*/
/*第二种解决办法*/
/* overflow: hidden; */
/*给父元素添加 overflow: hidden属性 */
}
div.cbox {
width: 150px;
height: 150px;
background-color: green;
margin-top: 30px; /*给子元素添加外上边距*/
/*第三种解决办法*/
display: inline-block;
/* 将元素设置成行内块 */
}
</style>
<body>
<div class="fbox">
<div class="cbox">子元素</div>
</div>
</body>
效果:一样解决问题!
第四:
既然margin-top有这样的问题,那么也可以给父元素添加padding-top属性,来规范这个问题。
<style>
body {
border: 3px solid rgb(3, 3, 3);
}
div.fbox {
width: 300px;
height: 300px;
background-color: pink;
/*第一种解决办法*/
/* border-top: 1px solid transparent; */
/*给父元素添加上边框线为透明色*/
/*第二种解决办法*/
/* overflow: hidden; */
/*给父元素添加 overflow: hidden属性 */
/*第四种解决办法*/
padding-top: 1px;
/*给父元素添加 padding-top 属性 */
}
div.cbox {
width: 150px;
height: 150px;
background-color: green;
margin-top: 30px; /*给子元素添加外上边距*/
/*第三种解决办法*/
/* display: inline-block; */
/* 将元素设置成行内块 */
}
</style>
<body>
<div class="fbox">
<div class="cbox">子元素</div>
</div>
</body>
效果:方可解决问题!
此外,还有一些属性也可以解决,比如设置绝对定位,固定定位,浮动元素,也是同样可以的。
希望可以给你带来帮助,谢谢! 2021/4/10