<div>
    <p>1</p>

</div>

div{
width:600px;

overflow:auto;
}
p{
        width:100%;
        padding:10px;
}

p{
        width:auto;
        padding:10px;
}

如果是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%還是width:auto;，其計算的參照都是父級內容區width值，而非總寬度值。。