<!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值，而非總寬度值。。