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>