寬度的100%和auto的區別

前段時間作項目，發現分不清width設爲100%和auto的區別，實在是太水了，就查了點資料，作個總結，有不對的地方歡迎你們指出。

width：auto

塊級元素默認的寬度值。看一下MDN上的解釋：The browser will calculate and select a width for the specified element.大意是瀏覽器會本身選擇一個合適的寬度值，那麼怎麼計算呢？

個人理解是：被包含元素的margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block。（1）

若是margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right'比較大，就減少width的值，若是比較小呢，就增大width的值，使其知足（1）式。

下面看個demo驗證一下： http://jsfiddle.net/guoheng/7mj05cns/  當增長子元素的margin能夠直觀的看到width在縮小，驗證了個人見解。

width:100%

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

能夠看下這個demo驗證： http://jsfiddle.net/guoheng/eo7L3fg7/ 能夠看到給子元素添加padding或者margin以後會使子元素突破父級元素。

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

參考

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/