理解box-sizing屬性border-box，content-box，其實也是理解正常盒模型與異常盒模型。
正常盒模型
正常盒模型，是指塊元素box-sizing屬性為content-box的盒模型。一般在現代瀏覽器中使用的都是正常盒模型content-box，它也是標准 w3c 盒子模型。
參見 CSS盒模型
正常盒模型是指：盒模型的大小包括content，padding，border，並且先做content.。
正常盒模型的大小會以內容優先自動擴展，內部子元素超過父元素給定的大小，會將父元素撐大。
怪異盒模型
怪異盒模型，是指塊元素box-sizing屬性為border-box的盒模型。一般在IE瀏覽器中默認為這種怪異盒模型，但是由於其自身的特殊性，手機頁面中也有使用怪異盒模型。
怪異盒模型是先做盒。然后添加border，padding，最后做content。即保證盒模型優先，先做盒再放內容，不管內容是否放得下，一般手機上用的更多。
更通俗的說，怪異盒模型中，父元素的盒模型確定，子元素是無法撐開父元素的盒模型，只能在盒模型剩余空間展示。
怎么樣才算是選擇了“標准 w3c 盒子模型”呢？
很簡單，就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，
即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標准 w3c 盒子模型解釋你的盒子。所以網頁在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標准 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了