邊界傳導問題
看一個簡單的例子：
如下圖所示：
body里面1個div，該div下面包含一個p標簽，里面有文字。很簡單。
Paste_Image.png
問題來了：里面子元素p，沒有像代碼設置的那樣：margin 20px（相對div的），而是與div上邊緣重合，與父元素div頂部緊貼一起距外層body40px。
原因如下：
### 因為作為p的父元素的div，沒有外邊界！
所以里面的子元素p，以為自己的margin是距離body（因為body有外邊界），所以雖然p在div中，但p仍然是以為自己的父元素是body，
所以趕緊湊了過去，也就是造成了與div頂部緊貼的現象。
而且，如果p的margin設置為80px，那么div將和p一起緊貼，然后距body上邊界80px。
Paste_Image.png
解決方案：
既然知道原因，那么解決的方案其實也就是給div一個邊界：
（1）最簡單的方法，給div一個border：1px solid red，問題解決，馬上p找到自己的父元素，根據父元素的外邊界和自己設定好的margin找到了自己的正確位置。
成功
（2）給p在div內找一個參照物再加入一個子元素，本例中加了一個span標簽，因為有了span標簽的，p根據span的位置，也找到了自己的位置。
但需要注意的就是：要加在p元素之前，否則還是找不到自己的位置，因為p的上面還是沒有邊界。
這樣是不行的，span要放在p標簽之上
成功
（3）div的overflow屬性設置為hidden，其實也就是給了div一個明確的邊界，所以設置后，p也可以找到自己的位置了。
成功
源碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#box {
height: 200px;
width: 200px;
margin: 40px;
background-color: green;
/*overflow: hidden;*/
/*border: 1px solid red;*/
}
p {
border: 1px solid red;
/*display: block;*/
height: 100px;
width: 100px;
margin: 20px auto;
background-color: blue;
font-size: 12px;
text-align: center;
vertical-align: middle;
}
span {
font-size: 18px;
}
</style>
</head>
<body style="background-color:#ccc;border: 1px solid red;">
<!-- <div class="container" style="padding:30px;background-color:#fff;"> -->
<div id="con">
<div id="box">
<!-- haha -->
<p>The</p>
<span>test</span>
</div>
</div>
<!-- </div> -->
</body>
</html>
