解析width: 100%；与width: auto；的区别
.box4 {
width: 980px;
padding: 20px;
background-color: #ccc;
}
.box4 p {
width: 100%;
/*width: auto;*/
padding: 10px;
}
<div class="box4">
<p>1111</p>
</div>
如果p的width:100%，则说明p的width会得到980px就已经充满div区域，然后自己又有padding，所以会超出div。
而当width: auto时它是总体宽度(包括width，margin，padding，border)等于父级宽度(width，不包含父级的margin，padding，border)，所以如果padding已经左右占去10px的空间，那么width给的值就是960px。
但无论是width: 100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值。
width为auto或者100%的区别
一、四个理论
某div不显示设置宽度，那么width为auto
某div的width在默认情况设置的是盒子模型中content的值
某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度
某个div的width不设置，或者设置为auto，那么表示这个div的所有部分(内容，边框，内边距等的距离加起来)为父元素宽度。
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 1000px;
}
.content1 {
background: yellowgreen;
width: auto;
height: 100px;
padding-left: 100px;
}
.content2 {
background: gold;
width: 100%;
height: 100px;
padding-left: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
代码如图，为什么position: absolute；去掉height: 100%;就不管用了？
<style>
#div {
position: absolute;
width: 100%;
height: 100%;
background: #ccc;
top: 100px;
left: 10px;
}
</style>
</head>
<body>
<div id="#div"></div>
</body>
加position: absolute；使#div脱离了文档流，什么意思呢？对这个例子来说，就是#div的布局不受<html>的限制了，可以说是和<html>平起平坐了，所以此时设置的高度100%就是浏览器的高度。
不加position: absolute; #div还是在文档流中，高度100%是针对它的父元素<body>来说的，由于#div中没有内空来占空间，所以此时的<body>的高度为0，所以#div的高度也为0。
同理<body>对于<html>。所以，加上html， body{height: 100%}就可以给#div高度了。