盒模型一共有兩種模式：W3C標准模式和IE怪異模式
一、標准盒子模型
可以看到，在標准盒模型下，width和height是內容區域即content的width和height。
在標准模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
二、IE盒子模型
而IE盒模型或怪異盒模型顯而易見的區別就是，width和height除了content區域外，還包含padding和border。
一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
1、如何運用
只要在文檔首部加了doctype申明，即使用了標准盒模型，而不加，則會由瀏覽器自己決定，比如，ie 瀏覽器中顯示“ie盒子模型”，在 ff 瀏覽器中顯示“標准 w3c 盒子模型”。
當用編輯器新建一個html頁面的時候最頂上都會有一個DOCTYPE標簽，不定義DOCTYPE，會觸發怪異模式
2、怪異盒模型
CSS3的box-sizing
box-sizing語法：
box-sizing: content-box || border-box || inherit || initial
當設置為box-sizing:content-box時，將采用標准模式解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用怪異模式解析計算；
參考文獻：https://www.cnblogs.com/yky-iris/p/7719895.html