css盒子模型的寬度問題

標籤：idt   推出   預設   擷取   max   距離   width   大於   設定圖   

最近看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結合了一些自己的理解，如有錯誤，還請指正。

 

css盒子模型的寬度問題