曾經遇到過這樣的問題，設定一個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。
