代码如下：
<style type="text/css">
html,body{
margin: 0;
padding:0;
}
.container{
height: 498px;
background: url('images/信息高速公路.jpg') no-repeat;
background-size: cover;
}
.title{
margin-top: 80px;
}
</style>
</head>
<body>
<div class="container">
<p class="title">关于我们</p>
<p>ABOUT US AND EUROPE</p>
</div>
</body>
描述:title样式最后的效果是相对于body有一个margin-top为80px的效果，并且container样式的这个div距离body有一个80px的距离。但是我是希望是container距离body为0，title样式距离container这个div顶部为80px。
原因:
当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,浏览器会把内层元素的margin-top作用与父元素。
也就是外层容器此时有了这个margin-top。
解决办法：
1.给外层容器加上overflow:hidden或hidden。
2.给外层容器加上position:absolute脱离文档流（也可以添加float是一个原理）。
3.给外层容器加上display:inline-block或table类型。
4.给外层容器加上padding-top:80px;
（实际上是针对块级元素进行操作）
5.给内层容器添加padding-top:80px;
(解决内外层元素之间没有元素，在之间添加了padding)。
