标签:flow css style 外部 溢出 width bug title html
margin-top塌陷是怎么回事呢?
两个盒子嵌套的时候,内部盒子的margin-top会加到外面的盒子上面,导致盒子的margin-top塌陷。这是一个系统级别的bug.
解决的办法有:
1.给盒子加上一个边框,缺点是盒子会有一个边框影响美观
2.外部盒子设置overflow:hidden;缺点是当盒子里面的元素溢出的时候,会裁剪掉盒子里面的内容。
3.使用伪元素方法(最优的方法):这个方法的原理至今没弄懂,为啥加上一个伪元素和一个display:table就可以解决了呢???
.clearfix:before{
content:"";
display:table;
}
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>margin特性</title>
<style type="text/css">
.con{
width: 300px;
height: 200px;
background-color: gold;
/*设置盒子居中的方法:padding或者margin
width: 100px;
height: 100px;
padding: 50px 100px;*/
/*利用margin来居中会出现margin-top塌陷的问题;解决margin-top塌陷的方法一:加外边框;但是会加上一个边框
width: 298px;
height: 198px;
background-color: gold;
border:1px solid red;*/
/*解决margin-top塌陷第二种方法
overflow: hidden;*/
}
.box{
width: 100px;
height: 100px;
background-color: green;
margin:50px 100px;
}
.clearfix:before{
content: "";
display: table;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
标签:flow css style 外部 溢出 width bug title html
原文地址:https://www.cnblogs.com/pengwa1226/p/12286299.html