CSS中的高度和宽度
1.简单的说，常规流向的块级元素，width为auto时，会尽量充满父元素的内容宽度，而height为auto时，则是由其内部的不浮动的子元素的高度决定(无浮动，绝对定位)。
2.width:100%;width:auto
<div>
<p>1</p>
</div>
<style type="text/css">
div{
width:600px;
overflow:auto;
}
p{
width:100%;
padding:10px;
}
p{
width:auto;
padding:10px;
}
</style>
如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有padding，所以会出现滚动条。
而width:auto则比较聪明，它是总体宽度（广义，包括width，margin,padding,border这些）等于父级宽度（狭义，内容区，仅指width），所以如果padding已经左右占去20px的空间，那么width给的值就是580px。
所以，如果：
p{
width:auto;
background-color: red;
margin:10px;
padding:10px;
}
其实最后实际的width值为560px。
但无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值。。
3.height:100%;height:auto
auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。
例如：
<div style="height:100px;width:200px;">
<div style="height:auto;width:100px;float:left;">这个容器的高度是随里面的内容的高度而定
</div>
<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度，100px
</div>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
