CSS中的高度和宽度

1.简单的说，常规流向的块级元素，width为auto时，会尽量充满父元素的内容宽度，而height为auto时，则是由其内部的不浮动的子元素的高度决定(无浮动，绝对定位)。

2.100%;auto

<div>
    <p>1</p>
</div>
<style type="text/css">
div{
　　600px;
　　overflow:auto;
}
p{

　　100%;
      padding:10px;
}
p{
      auto;
      padding:10px;
}
</style>
如果是100%，则说明p的width会得到600px就已经充满div区域，然后自己又有padding，所以会出现滚动条。
而auto则比较聪明，它是总体宽度（广义，包括width，margin,padding,border这些）等于父级宽度（狭义，内容区，仅指width），所以如果padding已经左右占去20px的空间，那么width给的值就是580px。

所以，如果：

p{
     auto;
     background-color: red;
     margin:10px;
     padding:10px;
 }

其实最后实际的width值为560px。
但无论是100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值。。

3.height:100%;height:auto

auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。

例如：

<div style="height:100px;200px;">  

    <div style="height:auto;100px;float:left;">这个容器的高度是随里面的内容的高度而定

　 </div>  

    <div style="height:100%;100px;float:right;">这个容器的高度为父级的高度，100px

　 </div>

</div>