边界传导问题
看一个简单的例子：
如下图所示：
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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//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>
