首先上圖，這兩張很明顯可以看出IE盒模型和標准盒模型之間的差別。
當然今天不是去細細追究兩種模型具體是怎么去計算布局的，那個很多文章已經已經有過了，不再重復。以前剛開始學習盒模型的時候，就學到的是IE的盒模型不規范，不符合標准的盒模型，要加文檔申明把IE的轉換為標准的。要給文檔頭部加上 DOCTYPE 聲明。讓所有瀏覽器中都可以顯示“標准 W3C 盒子模型”。為了讓網頁能兼容各個瀏覽器。殊不知，真正開發的時候其實IE模型更利於實際開發。
來說說為什么要將標准盒模型轉換為IE盒模型
為什么IE盒模型更容易開發？先來解決這個問題。從上面兩張圖片對比可以看出來，標准的盒模型padding，border是不算在寬度之內的，所以當你比如要在一個容器里並排顯示兩個同樣的盒子。你用標准模型時肯定會這樣設置每個盒子width:50%.但是當你查看時會發現兩個盒子緊緊挨在一起實在是不美觀，所以你又設置padding:0 5%；然而這時候兩個盒子寬度又超過了大容器的總寬度，所以你又得去調整盒子的width:40% 這樣確實可以解決問題，可是這樣你不覺得很不方便嗎。。好了這時候就可以看出IE盒模型的好處了。就將兩個盒子的寬度設置為50%，這時候就算你再怎么去調整padding都會在兩個盒子的內部去調整，不會再影響布局。簡直方便到不要不要的~~
那么怎樣將標准盒模型轉化為IE盒模型呢
在css3中有這樣一個屬性：
官方給的解釋是：box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
再來看看box-sizing屬性給出的幾個值
content-box:這是由css2.1規定的寬度高度行為。什么是按css2.1的行為？意思就是說設置這個值之后，就會按以前規定的標准來顯示，也就是按照標准的盒模型顯示。之所以有這個屬性以及這個值，可以看出w3c也意識到了自己規定的標准盒模型簡直就是個坑。。
border-box:好了，前面絮絮叨叨這么多，就是為了引出這么個東西。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。所以w3c終於承認了人家IE盒模型的合理性。通過設置 box-sizing的值為border-box來模擬這一規范。
盒模型這塊看似很簡單的問題，如果沒搞的很清楚，也會造成很大的困擾，對開發進度產生影響。
box-sizing其它的值
content-box- 描述：在寬度和高度之外繪制元素的內邊距和邊框。
border-box- 描述：為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制
inherit- 描述：繼承 父元素
box-sizing屬性的值
- 描述：繼承 父元素
瀏覽器兼容性
IE8及以上版本支持該屬性，Firefox需要加上瀏覽器廠商前綴-moz-，對於低版本的IOS和Android瀏覽器也需要加上-webkit-。實際上，很多reset.css或者normal.css里都包含如下CSS語句，也是比較贊成的用法：
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } box-sizing 布局三欄目案例
div{ height:700px; float:left; } div.left{ width:25%; background:red; } div.cent{ width:50%; box-sizing:border-box;/*可以改變元素以使其寬度包含填充*/ /* 現在整個元素,包括填充在內,占頁面總寬度的50%,所以元素的組合寬度為100%,這全程它們很好地適應於它們的容器.*/ background:yellow; padding:0 20px;/*加了這個會使盒子內容溢出 但是box-sizing很好的自適應了*/ } div.right{ width:25%; background:blue; } <div class="left"></div> <div class="cent"></div> <div class="right"></div> - 效果
作者：poetries
鏈接：https://www.jianshu.com/p/e2eb0d8c9de6
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。