順便又溫習了一下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;