盒模型一共有兩種模式，一種是標准模式，另一種就是怪異模式。
當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標簽，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE HTML>
以上幾種DOCTYPE都是標准的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會觸發標准模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。
首先定義一個div塊用來演示標准模式和怪異模式的區別，以下是Css樣式
box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }
在標准模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
也就是盒子寬高 = 內容區域的寬高+padding+border;
那么，在此基礎上介紹一下css3屬性box-sizing;
box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用標准模式解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用怪異模式解析計算；
目前使用此屬性需要添加前綴：
-webkit-box-sizing: content-box; -moz-box-sizing: content-box;