轉載自：http://www.bbs0101.com/archives/98.html
先不考慮css3的情況，盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。
當你用編輯器新建一個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;
看到這裏你應該對盒模型的兩種模式有了清晰的認識，下面在此基礎上介紹一下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;