盒模型的過往
CSS在誕生之初套菜，盒模型的工作機(jī)制默認(rèn)如下：
【設(shè)置的寬度】：width + padding + border = actual visible/rendered width of an element's box
【設(shè)置的高度】：height + padding + border = actual visible/rendered height of an element's box
如此可見纵寝，我們在CSS中設(shè)置一個width或height屬性庆亡，如果這個屬性有任何的padding或是border扣典，最終繪制在視圖上盒子的寬高（即實(shí)際可見的寬高）會加上我們設(shè)置的border與padding值唆鸡。
這是相當(dāng)反直覺的設(shè)計(jì)兄裂，因?yàn)樽罱K呈現(xiàn)在屏幕上的盒子寬高與我們心目中預(yù)想的寬高有出入池凄！ 這也在實(shí)際布局中造成了麻煩抡驼，這意味著我餓每年在調(diào)整寬高時必須時刻注意著元素的邊框和內(nèi)邊距！
但是在早些版本的IE瀏覽器（<=IE6）則采取了截然不同的處理方案肿仑，我們稱之為怪異模式致盟，他的工作機(jī)制如下：
box width = actual visible/rendered width of an element's box
box height = actual height/rendered height of an element's box
border和padding值所占的幾何空間被移入了我們給出的寬高中，因此實(shí)際可見的盒子并不會擴(kuò)大尤慰，而是在內(nèi)部解決邊距馏锡、邊框和內(nèi)容區(qū)的計(jì)算。
在實(shí)際布局中割择，如果是固定寬度布局眷篇，就算是在默認(rèn)的盒子模型下也不會給我們造成太大的麻煩，只需要做一些簡單的算術(shù)運(yùn)算就可以把寬高計(jì)算出來荔泳，來適應(yīng)其內(nèi)邊距和邊框蕉饼。然而，寬高的算數(shù)值在響應(yīng)式設(shè)計(jì)之下則是無從計(jì)算的玛歌。
在響應(yīng)式設(shè)計(jì)已經(jīng)占據(jù)絕對主流的今天昧港，在設(shè)計(jì)師和工程師的期盼下，一種受到W3C官方認(rèn)可的盒子模型應(yīng)運(yùn)而出支子。
Box-sizing
CSS3的發(fā)布正式帶出了
box-sizing创肥，它自帶了三個屬性值：box-sizing，padding-sizing和border-box值朋。其中叹侄，最常用的便是border-box。
目前所有瀏覽器默認(rèn)的盒模型均是：
width or height + padding + border = actual width or height
- 通過
box-sizing: border-box;使盒模型修改為怪異模型的呈現(xiàn)方式昨登，即給出的寬高不再受到內(nèi)邊距和邊框的影響趾代，內(nèi)容區(qū)的實(shí)際寬度是給出的寬度 - （border + padding）。 -
contenr-box丰辣，給出的寬度僅僅是內(nèi)容區(qū)的寬度撒强，最終渲染后的盒子寬度要加上邊框和內(nèi)邊距。 -
padding-box笙什，給出的寬高包括內(nèi)容區(qū)與內(nèi)邊距飘哨，不包括邊框與外邊距。
須知
- 目前所有瀏覽器均支持
box-sizing -
padding-box僅有firefox瀏覽器支持琐凭，且目前已經(jīng)被官方文檔移除 - 在IE8中芽隆，如果一個元素使用了Min/max-width/height，瀏覽器會自動忽略
border-box
