最近看css權威指南的時候，發現一個之前特別不清楚的概念——寬度。
每個塊級元素都有一個元素框，元素框內包括了元素內容，元素內邊距，元素邊框，元素外邊距。
所以元素框的寬度=元素內容寬度+元素內邊距+元素邊框+元素外邊距。
也就是他父元素的內容寬度。
那么我們常說的width就是元素框的寬度嗎？
答案是否定的。我們常說的width屬性值在css中被定義為從左內邊界到右內邊界的距離。也就是內容塊的寬度。什么都不包括。例如
<div id="parent" style="width: 200px;padding: 20px;"></div>
這里，你用js去獲取width值就是200px。就是一個很普通的屬性值。加的padding並不會影響你的width值。
那么我們常說的padding+border+content寬度到底是什么呢？
這是元素可見區域的寬度。通常我們用offsetwidth獲取就是這個寬度。當然了，我們常說的盒子寬度其實在我看來也是這個值。上面那個盒子的offsetwidth就是240
因為布局的時候有時候並不希望padding會撐大原來的盒子，所以css3中推出了已box-sizing的屬性
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。
Firefox 支持替代的 -moz-box-sizing 屬性。
這個屬性默認值是content-box。當我們把值設成border-box的時候為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
關於寬度還有一個最小寬度min-width和max-width的問題。這個值設置圖片的時候用的比較多。如果元素小於最小寬度，元素會被拉伸到最小寬度，如果元素大於最大寬度，元素會被壓縮到最大寬度值。如果在兩者之間正常顯示。
暫時想到的關於寬度的就這么多。主要參考css權威指南和w3cschool結合了一些自己的理解，如有錯誤，還請指正。