cssmargin外边距塌陷问题
⼀，margin 外边距塌陷问题
当时说到了盒模型，盒模型包含着margin，为什么要在这⾥说margin呢？因为元素和元素在垂直⽅向上margin⾥⾯有坑。
我们来看⼀个例⼦：
html结构：
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
css样式：
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
当给两个标准流下兄弟盒⼦设置垂直⽅向上的margin时，那么以较⼤的为准，那么我们称这种现象叫塌陷。我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直⽅向盒⼦的时候主要margin的⽤法。
当我们给两个标准流下的兄弟盒⼦设置浮动之后，就不会出现margin塌陷的问题。
1）margin：0 auto;
div{
width: 780px;
height: 50px;
background-color: red;
/*⽔平居中盒⼦*/
margin: 0px auto;
/*⽔平居中⽂字*/
text-align: center;
}
当⼀个div元素设置margin：0 auto；时就会居中盒⼦，那我们知道margin:0 auto；表⽰上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒⼦尽可能⼤的右边有很⼤的距离，没有什么意义。当设置margin-right:auto；我们发现盒⼦尽可能⼤的左边有很⼤的距离。当两条语句并存的时候，我们发现盒⼦尽可能⼤的左右两边有很⼤的距离。此时我们就发现盒⼦居中了。
另外如何给盒⼦设置浮动，那么margin:0 auto失效。
使⽤margin：0 auto；注意点：
1.使⽤margin: 0 auto;⽔平居中盒⼦必须有width，要有明确width，⽂字⽔平居中使⽤text-align: center;
2.只有标准流下的盒⼦才能使⽤margin:0 auto;
当⼀个盒⼦浮动了，固定定位，绝对定位(后⾯会讲)，margin:0 auto; 不能⽤了
3.margin：0 auto；居中盒⼦。⽽不是居中⽂本，⽂字⽔平居中使⽤text-align: center;
另外⼤家⼀定要知道margin属性是描述兄弟盒⼦的关系，⽽padding描述的是⽗⼦盒⼦的关系
⼆，善于使⽤⽗亲的padding，⽽不是margin
如果让⼤家实现如图的效果，应该有不少的同学做不出来。
那么我们来看看这个案例，它的坑在哪⾥？
下⾯这个代码应该是⼤家都会去写的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
css实现垂直水平居中
height: 100px;
background-color: orange;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="xiongda">
</div>
</div>
</body>
</html>
因为⽗亲没有border，那么⼉⼦margin-top实际上踹的是“流” 踹的是⾏，所以⽗亲掉下来了，⼀旦给⽗亲⼀个border发现就好了。
那么问题来了，我们不可能在页⾯中⽆缘⽆故的去给盒⼦加⼀个border，所以此时的解决⽅案只有⼀种。就是使⽤⽗亲的padding。让⼦盒⼦挤下来。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。