CSS盒模型全面講解，怪異模式盒模型，CSS3 box-sizing屬性
阿新 • • 發佈：2019-01-24
今天學習了一下css3的box-sizing屬性，順便又溫習了一下css的盒模型，最後覺得有必要對盒模型做一個全面整理。
先不考慮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;本條目釋出於