一、width：auto
1、塊級元素默認的寬度值，意味着瀏覽器會自己選擇一個合適的寬度值。
2、內容的寬度='margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'
如果margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right'比較大，就減小width的值，如果比較小呢，就增大width的值，使其滿足上面的表達式。
二、width:100%
當width設置爲100%之後，它的寬度就是父級的width，並且隨着父級的width自動變化，增加子元素的padding和margin之後，它的width還是不變的，這是與設置爲auto的區別。
三、width:auto和width:100%的區別
1、width:100% 並不包含margin-left margin-right的屬性值，直接取其父容器的寬度加上含margin-left /margin-right的值。如果設置了margin那新的width值是容器的寬度加上margin的值。就會發現加了 margin相對應的邊就會多出設置的空白。而且會多出橫向滾動條因爲寬度已經超出了屏幕的範圍，(這條相對於父容器是body)。
2、width:auto包含margin-left/margin-right的屬性值。width:auto總是佔據整行，這其中margin的值已經包含其中了，如果要設置margin的值那就用一整行然後減去margin的值就得到了現在的寬度了。減去的這個值就是相應邊得空白。顯著的特徵是這個沒有橫向滾動條出現也就是寬度沒有增加。
3、一般width:auto使用的多，因爲這樣靈活，而width:100%使用比較少，因爲在增加padding或者margin的時候，容易使其突破父級框，破環佈局。
參考資料： css中width:auto和width:100%的區別 http://www.studyofnet.com/news/965.html