W3C盒模型
IE盒模型
從上圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：
ie 盒子模型的 content 部分包含了 border 和 pading。
兩者的不同體現在width和height上
IE：width=content+padding+border
W3C: width=content
例：一個盒子的 margin 爲 20px，border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px，
- 假如用IE模型解釋，那麼這個盒子
- 佔據的位置：width: 200+40=240, height: 50+40 = 90
- 假如用w3c盒子模型，那麼這個盒子
- 佔據的位置：width: 200+20+2+40=262, height: 50+20+2+40=112
那應該選擇哪中盒子模型呢？當然是“標準 w3c 盒子模型”了。怎麼樣纔算是選擇了“標準 w3c 盒子模型”呢？
很簡單，就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那麼各個瀏覽器會根據自己的行爲去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 聲明，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了
兼容性處理：
box-sizing 屬性允許你以某種方式定義某些元素，以適應指定區域。規定容器元素的最終尺寸計算方式
box-sizing: content-box|border-box|inherit:
content-box: 默認值， 寬度=content+padding+border，設置div的width=100， 就是content的寬度是100，實際寬度，會得到一個比預期大了padding和border的盒子 ==》W3C
border-box: 寬度=content， 設置div的width=100，得到最終寬度爲 100的盒子，padding和border都會在這個盒子裏減去，實際content爲width-padding-border ==> IE