[CSS]width:auto不等於100%

最近在公司發現排版有問題，出現不該出現的捲軸
CSS原本以為是width:100%，應該調一下box-sizing :border-sizing
結果還是一樣有問題….

後來發現auto，就不會有問題
不過當然要思考這兩個屬性差異
之後我認為width 沒設就是100%

但後來Google一下，發現我錯了，預設是auto (我也以為auto也是100%)

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

身為英文苦手不知道寫什麼意思，後來有爬到中文文章

内容的寬度=‘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的值，使其滿足上面的表達式。

http://m.studyofnet.com/news/965.html

總結一下，上面意思就是width:auto後，寬度算法會'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' >width，就會自動縮減width寬度；'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' <width，就會自動增加width寬度
簡單就是width:auto，不會備padding影響
正常情行應該選用width:auto比較不會有排版的問題

參考來源：
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
http://m.studyofnet.com/news/965.html
Visual formatting model details
https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width