演示margin外边距塌陷产生时,如何解决外边距塌陷,并列举出常用的解决margin外边距塌陷的办法;
什么情况下会产生margin外边距塌陷:
在两个div嵌套时,里面的div设置了margin-top外边距时,会产生异常
图片和代码演示:
未设置margin-top时
未设置margin-top时的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>宗波尘客-解决margin外边距塌陷的办法</title> <style> .box1 { width: 300px; height: 300px; background-color: red; } .box2 { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box1"> <div class="box2">内层的类名为box2的div(橘黄色)</div> 外层的类名为box1的div(红色) </div> </body> </html>
下面是添加了margin-top的状态:
下面是异常代码演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>宗波尘客-解决margin外边距塌陷的办法</title> <style> .box1 { width: 300px; height: 300px; background-color: red; } .box2 { margin-top: 50px; width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box1"> <div class="box2">内层的类名为box2的div(橘黄色)</div> 外层的类名为box1的div(红色) </div> </body> </html>
上方CSS样式里,在子元素里添加了margin-top:50px;使得父元素异常掉了下来,此问题称为外边距塌陷或者margin塌陷
margin外边距塌陷解决办法:
1、可以给父元素(标签)设置一个边框border(可以只设置上方的边框)
代码演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>宗波尘客-解决margin外边距塌陷的办法</title> <style> .box1 { /* 可以设置上边框 */ border-top: 1px solid transparent; width: 300px; height: 300px; background-color: red; } .box2 { margin-top: 50px; width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box1"> <div class="box2">内层的类名为box2的div(橘黄色)</div> 外层的类名为box1的div(红色) </div> </body> </html>
可以看到,上方设置了border-top,添加了1px上边框,颜色选择了透明色transparent,所以下方演示图看不到1px的边框
2、物理办法,给父元素设置padding-top将子元素挤下来
3、可以给父元素或者子元素设置float:left;浮动
<style> .box1 { width: 300px; height: 300px; background-color: red; } .box2 { /* 设置浮动 */ float: left; width: 100px; height: 100px; margin-top: 50px; background-color: orange; } </style>
3、可以给父元素或者子元素设置position定位
<style> .box1 { position: absolute; width: 300px; height: 300px; background-color: red; } .box2 { width: 100px; height: 100px; margin-top: 50px; background-color: orange; } </style>
我这里给父元素设置的绝对定位(给父元素设置相对定位无效哦)
4、将父元素或者子元素用display:inline-block;转换成行内块级元素
<style> .box1 { /* 将父元素或者子元素转换成行内块级元素 */ display: inline-block; width: 300px; height: 300px; background-color: red; } .box2 { width: 100px; height: 100px; margin-top: 50px; background-color: orange; } </style>
5、给父元素设置overflow:hidden;溢出隐藏(开启BFC模式)
<style> .box1 { /* 设置溢出隐藏 */ overflow: hidden; width: 300px; height: 300px; background-color: red; } .box2 { width: 100px; height: 100px; margin-top: 50px; background-color: orange; } </style>
6、给父元素设置display:flow-root;(开启BFC模式)
<style> .box1 { /* 这个类型也能开启BFC模式 */ display: flow-root; width: 300px; height: 300px; background-color: red; } .box2 { width: 100px; height: 100px; margin-top: 50px; background-color: orange; } </style>