盒子不同模式下的寬高判斷

曾經遇到過這樣的問題，設定一個div，當給div設定padding的時候，發現整個div的寬高都發生了變化，這裡就產生了一個疑惑，一個盒子的總體寬高到底是怎麼去判斷的呢？

經過查詢得知，盒子寬高的判定模式一共有兩種，分別為標準模式和怪異模式。

為了能更好的理解我們先設定一個div並給它設定樣式：

<span style="color: #008080;">1</span> <span style="color: #800000;">    #content1</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;"> 2px solid black</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">        margin</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">        padding</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">7</span>     } 

一般情況下個盒子的寬高在一般情況下等於內容的寬高+邊框的寬高+內邊距的寬高+外邊距的寬高

 這就是標準模式下的盒子寬高判定

 

但在某些時候（ie6,7,8 下DOCTYPE缺失）盒子的寬高等於設定的寬高+外邊距的寬高，這裡的設定的寬高就等於內容的寬高+內邊距的寬高+邊框的寬高

這就是怪異模式下的盒子寬高判定

 

我們可以透過使用box-sizing屬性來決定使用哪一種模式，

content-box : 將採用標準模式解析計算 ，

border-box: 將採用怪異模式解析計算； 

透過怪異模式我們可以在不改變盒子整體寬高的情況下給其設定padding。