<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width:600px;
overflow:auto;
}
p{
background-color: red;
}
p.p1{
width:100%;
padding:10px;
}
p.p2{
width:auto;
padding:10px;
}
</style>
</head>
<body>
<div>
<p class="p1">1</p>
</div>
<div>
<p class="p2">1</p>
</div>
</body>
</html>
如果是width:100%,則說明p的width會得到600px就已經充滿div區域,然後自己又有padding,所以會出現滾動條。
而width:auto則比較聰明,它是總體寬度(廣義,包括width,margin,padding,border這些)等於父級寬度(狹義,內容區,僅指width),所以如果padding已經左右佔去20px的空間,那麼width給的值就是580px。
但無論是width:100%還是auto,其計算的參照都是父級內容區width值,而非總寬度值。。