css中width:auto和width:100%的區別是什麼

1、width：auto

 

一、塊級元素默認的寬度值，意味着瀏覽器會本身選擇一個合適的寬度值。

二、內容的寬度='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的值，使其知足上面的表達式。

 

2、width:100%

 

當width設置爲100%以後，它的寬度就是父級的width，而且隨着父級的width自動變化，增長子元素的padding和margin以後，它的width仍是不變的，這是與設置爲auto的區別。

 

3、width:auto和width:100%的區別

 

一、width:100% 並不包含margin-left  margin-right的屬性值，直接取其父容器的寬度加上含margin-left /margin-right的值。若是設置了margin那新的width值是容器的寬度加上margin的值。就會發現加了  margin相對應的邊就會多出設置的空白。並且會多出橫向滾動條由於寬度已經超出了屏幕的範圍，(這條相對於父容器是body)。

二、width:auto包含margin-left/margin-right的屬性值。width:auto老是佔據整行，這其中margin的值已經包含其中了，若是要設置margin的值那就用一整行而後減去margin的值就獲得瞭如今的寬度了。減去的這個值就是相應邊得空白。顯著的特徵是這個沒有橫向滾動條出現也就是寬度沒有增長。

三、通常width:auto使用的多，由於這樣靈活，而width:100%使用比較少，由於在增長padding或者margin的時候，容易使其突破父級框，破環佈局。

參考資料： css中width:auto和width:100%的區別  http://www.studyofnet.com/news/965.html