6.margin塌陷問題
當時說到了盒模型，盒模型包含著margin，為什麼要在這裡說margin呢？因為元素和元素在垂直方向上margin裡面有坑。
我們來看一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.father{
overflow:hidden;
width:300px;
border:1px solid gray;
}
.box1{
width:200px;
height:50px;
background-color:red;
margin-bottom:20px;
float:left
}
.box2{
margin-top:50px;
width:400px;
height:150px;
background-color:green;
float:left
}
span{
background-color:red;
}
span.a{
margin-right:20px;
}
span.b{
margin-left:20px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
<span class="a">內容</span>
<span class="b">內容</span>
</body>
</html>
當給兩個標準流下兄弟盒子 設定垂直方向上的margin時，那麼以較大的為準，那麼我們稱這種現象叫塌陷。我們稱為這種技巧叫“奇淫技巧”。記住這種現象，在佈局垂直方向盒子的時候主要margin的用法。
當我們給兩個標準流下的兄弟盒子設定浮動之後，就不會出現margin塌陷的問題。
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
如果讓大家實現如圖的效果，應該有不少的同學做不出來。
那麼我們來看看這個案例，它的坑在哪裡？
下面這個程式碼應該是大家都會去寫的程式碼。
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
因為父親沒有border，那麼兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border發現就好了。
那麼問題來了，我們不可能在頁面中無緣無故的去給盒子加一個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。