CSS3盒模型——box-sizing

box-sizing盒模型是CSS3的一個重要屬性之一，經常被不少人給忽略了！CSS3出現以前box-sizing盒模型默認的寬高是指內容的寬高，css3以後能夠用box-sizing來指定寬高。css

目前比較火的前端框架Bootstrap,Foundation等國外框架都是全局設置box-sizing:border-box，若是您再也不支持低版本瀏覽器，這個屬性對您來講將會至關好用，相信你會愛上他的！html

語法：

content-box：這是由 CSS2.1 規定的寬度高度行爲。寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框。前端

border-box:爲元素設定的寬度和高度決定了元素的邊框盒。就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。css3

提示：IE8如下的瀏覽器支持content-box,不支持border-box,border-box是CSS3新增長屬性！瀏覽器

content-box示例：

border-box示例：

注意：看圖能夠清楚看到它們的，屬性爲content-box時寬爲：250，屬性爲border-box時寬爲：200前端框架

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