首頁  >  文章  >  web前端  >  解析width:100%;與width:auto;的差別

解析width:100%;與width:auto;的差別

巴扎黑
巴扎黑原創
2017-03-14 11:30:102185瀏覽

<p>
    <p>1111</p>
</p>
p{
  width:980px;<br>  background-color: #ccc;<br>  height:300px;
}
p{
     width:100%;<br>  /*width:auto;*/
    padding:10px;<br>  background-color:#000;<br>
}



如果是p的width:100%,則表示p的width會得到980px就已經充滿p區域,然後自己又有padding,所以會超出p。

而當width:auto時它是總體寬度(包括width,margin,padding,border)等於父級寬度(width,不包含父級的margin,padding,border),所以如果padding已經左右佔去10px的空間,那麼width給的值就是960px。

但無論是width:100%或auto,其計算的參考都是父級內容區width值,而非總寬度值.

以上是解析width:100%;與width:auto;的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn