>也許你覺得盒子模型很簡單，尤其在ie6怪異盒模型已經退出歷史舞臺的時候，但事實上并非如此，怪異盒模型仍然在不斷的被前端開發者所青睞。在css3中更是增加了`box-sizing`這一屬性來改變標準盒模型。 ## 概念（box-model） 盒子模型，就是針對html標簽為單位，所定義的一個形象化的展示模型，規定了元素如何處理元素內容、內邊距、邊框 和 外邊距的方式。而整體的頁面布局就是不同的盒子堆砌以及嵌套組成。 ## 盒子模型的差別 目前存在的盒子分為兩種，一種是w3c標準盒子，另外一種是ie6以下的怪異盒子模型。區別這兩種盒子之前，看一下盒子模型中外盒和內盒的概念。 1. w3c標準的盒模型中外盒以及內盒的定義 ： 外盒尺寸計算（元素空間尺寸） Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin 內盒尺寸計算（元素大小） Element Height = content height + padding + border （Height為內容高度） Element Width = content width + padding + border （Width為內容寬度） 2. ie傳統盒模型：ie6以下，不含ie6版本。 外盒尺寸計算（元素空間尺寸） Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度) Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度) 內盒尺寸計算（元素大小） Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度) Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度) 可以看到 在以上的盒模型中，元素的寬高定義的非常細，兩者的外盒模型是一致的，而ie的內盒模型的寬高是包括了w3c中的內盒模型的整體的,而content width=css屬性的width. ## 實際使用 * 在目前的主流瀏覽器使用最新的h5文檔申明之后，所參考的都是最新的w3c的盒模型，除非客戶ie特別是ie6以下版本才是怪異模型。 就使用而言，現狀是定義的樣式寬高只包括了內容的寬高，而實際的寬高則是一個累加值。所以在定義所有元素大小時，如果寬高中有padding以及padding值時需要對應的寬高減去間距或者邊框值，而這樣的使用是不便于控制的。 所以在w3c的官方說明中，是這樣建議的： > 目前最好的解決方案是回避這個問題。也就是，不要給元素有指定寬度高度的元素添加內邊距和邊框，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。 * 以上的應用也可以在大多數的網站中得到驗證，在許多需要內邊距或者邊框的，尤其內邊距的布局中，前端工程師都會多寫一層類似于wrapper 的包裹元素用來解決這個問題。 ## css3 box-sizing * 就概念而言，ie的怪異模型是比較好控制和理解的，w3c在認識到這個問題之后，在css3中追加了改變盒模型的屬性:box-sizing ，語法如下： `box-sizing ： content-box || border-box || inherit` 中文版說明：http://www.w3help.org/zh-cn/kb/006/ 在這個屬性中，可以控制內盒模型按照何種方式進行顯示，如果是content-box是w3c 的標準盒子，如果是border-box是ie 的怪異盒模型處理。 特別需要說明的是這個屬性現代的瀏覽器都是支持的，但IE家族只有IE8版本以上才支持，雖然現代瀏覽器支持box-sizing，但有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內核需要加上-webkit-，Presto內核-o-,IE8-ms-，所以box-sizing兼容瀏覽器時需要加上各自的前綴： ``` css /*Content box*/ Element { -moz-box-sizing: content-box; /*Firefox3.5+*/ -webkit-box-sizing: content-box; /*Safari3.2+*/ -o-box-sizing: content-box; /*Opera9.6*/ -ms-box-sizing: content-box; /*IE8*/ box-sizing: content-box; /*W3C標準(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標準語法)*/ } /*Border box*/ Element { -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3C標準(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標準語法)*/ } ``` ## 總結 * 在綜合分析和深刻理解盒模型之后，我們可以得出這樣的結論： 1. 如果用戶主題為ie8以上的現代瀏覽器，那么可以采用ie 的怪異模式來處理所有的盒模型，在boot等主流框架中也是用的這種。（最新，前端開發人員青睞的） 2. 而如果用戶中確定有ie6以及ie7時，需要按照w3c的標準建議，對于有padding的固寬固高元素需要多些一層wrapper。（常用經典，但是不方便的） 3. 針對有寬高同時有padding或者邊框的，將寬高的數值減去內間距以及邊框的。（少用） 4. 用補丁文件 box-sizing-polyfill git地址 ：https://github.com/Schepp/box-sizing-polyfill 使用說明 ：box-sizing: border-box;*behavior: url(/js/boxsizing.htc); 親測可用：`box-sizing:border-box;*behavior: url(/r/cms/www/zygw/css/boxsizing.htc); ` ## 個人建議 * 總結中第二種方案是最穩妥的，也是目前主流網站所采用的方式。但是隨著響應式布局以及w3c的不變更新優化，ie的傳統模型將不斷的會被更好的支持，那時將不用這么麻煩。