标签:tle har lan code 元素 图片 spl 解决方法 isp
3.1.1 在两个盒子嵌套时,内部的盒子设置的margin-top会加到外部的盒子上,导致内部盒子的margin-top设置失败,解决方法如下:
1.外部盒子设置一个边框
2.外部盒子设置一个overfow:hidden
3.使用伪元素类
<html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top塌陷</title> <style> .clearfix:before{ content: ""; display: table; } .con{ width: 300px; height: 300px; background-color: gold; /*border: 1px solid #000;方法1:加一个边框*/ /*overflow: hidden;方法2:使用overflow*/ /*方法3:使用伪元素*/ } .box{ width: 200px; height: 100px; background-color: green; margin:100px auto; } </style> </head> <body> <div class="con clearfix"> <div class="box"></div> </div> </body> </html>
3.1.2 示意图
标签:tle har lan code 元素 图片 spl 解决方法 isp
原文地址:https://www.cnblogs.com/zijiang-4476/p/12148067.html