CSS盒模型小結

對盒模型簡單作下總結和分享。

一、概念

當瀏覽器對文檔進行佈局時，渲染引擎將全部元素表現爲一個個矩形的盒子，稱爲盒模型。

如圖，咱們用chrome調試時看到的就是每一個元素對應的盒模型示例圖，盒模型從外到內包括margin-box,border-box,padding-box和content-box。

二、標準盒模型和怪異盒模型(IE盒模型)

標準盒模型和怪異盒模型的區別是整個盒子的寬高決定方式的不一樣，可經過設置css屬性box-sizing爲content-box和border-box分別將盒子設置爲標準盒模型和怪異盒模型。

三、哈?show me the code?

<style> div{ width:100px; height:50px; padding:5px; border:5px solid black; margin:5px; } .normal{ background: red; } .strange{ background: green; box-sizing: border-box; } </style>
<div class="normal">
    標準盒模型
</div>
<div class="strange">
    怪異盒模型
</div>
複製代碼

標準盒模型

怪異盒模型

如上，盒子相關設置值相同， 標準盒模型盒子的寬度爲： margin+border+padding+content 怪異盒模型盒子的寬度爲： css設置的width值 從而致使二者所佔區域不一樣

四、默認設置

除IE外，瀏覽器默認使用標準盒模式解析元素，其也是W3C的標準。惱人的IE5.5及更早IE瀏覽器默認使用怪異模式解析元素，因此怪異模式也稱IE模式。

五、做用

筆者經驗有限，使用較多的狀況是將某個元素寬度控制在特定值時，設置box-sizing爲border-box，有其餘經常使用案例歡迎你們留言討論。