边框的作用之产生相对margin
.parent{
width:200px;
height: 100px;
background:blue;
//border: 1px solid black; 如果不加边框,子元素的margin 会扩展到父元素上,
//结果就是父元素产生了margin,而子元素跟着移动了. 如果父元素有了边框,那么
//子元素的margin 就会产生正常的结果.
/////可以用万能的overflow:hidden; 结果是一样的
}
.child{
width:50px;
height:50px;
background:red;
margin-top:30px;
}
<div class="parent">
<div class="child"></div>
</div>