错误做法
想要令body里一个块元素（div）占全屏，相信很多人（包括我）都会直接把body设置宽高100%，但实际却是，行不通
body{ width:100%; height:100%;}
原因：
因为body跟div一样是块元素，直接赋值给块元素height:100%，相当于就是默认值的独占一行。
所以这里写body{ width:100%; height:100%;}，其实是毫无作用的。
《css权威指南》指出，如果没有显示声明包含块的height，百分数高度会重置为auto，所以上面div1height设置为任何值都跟设置没设置一样。
第一种方式
给div设置{position: absolute; top: 0px; bottom: 0px;}
<style class="text/css">
body{
padding: 0px;
margin: 0px;
}
.box{
background-color: yellow;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
bottom: 0px;
}
</style>
<body>
<div class="bg"></div>
</body>
第二种方式
加上html,body{ width:100%; height:100%; }
<style class="text/css">
body{
padding: 0px;
margin: 0px;
}
html,body{
width: 100%;
height: 100%;
}
.box{
background-color: yellow;
width: 100%;
height: 100%;
}
</style>
<body>
<div class="bg"></div>
</body>
第三种方式（常用）
给该元素设置{min-width: 100%; min-height: 100%; position: absolute;}
优点：①简洁，②缩小浏览器，拉动滚动条也还是满屏背景
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.bg {
min-width: 100%;
min-height: 100%;
position: absolute;
background: yellow;
}
</style>
<body>
<div class="bg"></div>
</body>```
