干前端，跑不了和IE大叔打交道.....有句話叫存在即合理，IE大叔在前端界是灰常的NB啊，既然咱改變不了世界，就只能改變自己。
先上定義：為了給瀏覽器上各個元素排版定位，瀏覽器會根據渲染模式為元素生產4個矩形框，分別從外到內為margin、border、
padding、content，它們不可分割，但可能重合，這就是所謂的盒子模型，即CSS對一個元素渲染后的抽象形態(tài)。
來一起看看大叔的眼里的盒子。
總結一哈：
盒子模型的范圍也包括 margin、border、padding、content
但W3C認為：盒子大小= content
IE認為： 盒子大小= border + padding + content
小學應用題：
一個盒子， margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，
求盒子在W3C和IE中，占據大小和實際大小。（占據大?。喉撁鎯热菁{它所需的尺寸，包括margin。實際大?。阂簿褪莃order以內的大小，它不包括margin）
解：W3C占據：寬 20*2+1*2+10*2+200=262px 高 20*2+1*2+10*2+50=112px
W3C實際：寬 1*2+10*2+200=222px 高 1*2+10*2+50=72px
IE占據： 寬 20*2+200=240px 高 20*2+50=90px
IE實際： 寬 200px 高 50px
解決方案：
為了統(tǒng)一渲染布局，在頁面第一行要進行DOCTYPE聲明，也就是DTD(文檔類型定義)，聲明成標準模式即可。
CSS3正名：
其實IE大叔的盒子模型也不無道理，只是對盒子的兩種理解，在實際應用中也會感覺IE大叔的盒子模型在布局上也可能方便一些，尤其是需要設置border或者padding的時候。所以CSS3中提出了box-sizing的概念。
box-sizing中有三種值：
content-box（W3C盒模型）
border-box （IE盒模型）
padding-box（不含border的盒子模型，不常用，只有firefox支持）
下面來看看IE盒模型的可取之處：
問：設置兩個并排的div，各占據頁面總寬度的50%，同時要求div都有10px的邊框、上下左右30px的補白，即如下效果
CSS:
body { padding: 0; margin: 0;
}#div1, #div2 { float: left; width: 50%; height: 200px; box-sizing: border-box; border: 10px solid #a00; padding: 30px;}
HTML:
<div id="div1"> div1</div><div id="div2"> div2</div>
再回到W3C盒子模型，也就是content-box，要實現此效果，請自行嘗試（注意要各50%，可隨容器大小自動變化）
總結一下就是 IE 長寬是包含 邊框和填充的 而 3C 是不包含的
所以要么就是在同一個盒子中不用 padding 和 邊框 就沒有問題，真的要paddin效果怎么辦呢 就是在外放一個div 內層用margin
如果要邊框的話 就沒有辦法了只能用計算實際像素 或預留 邊框像素，或者用細div 設背景色來做邊框效果，用細div做的話好一點，但標簽數要多。
