css中“box-sizing”詳解

今天翻到w3c上關於box-sizing這個屬性值，發現上面的概念異常難懂，最后查找資料對其進行總結，總結如下

定義：box-sizing:允許您以特定的方式定義匹配某個區域的特定元素(W3C上的原話 )

語法：box-sizing:content-box|border-box

content-box:

寬度和高度分別應用到元素的內容框。

在寬度和高度之外繪制元素的內邊距和邊框。

border-box:

為元素設定的寬度和高度決定了元素的邊框盒。

就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。

通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

瀏覽器兼容性：

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。

Firefox 支持替代的 -moz-box-sizing 屬性。

個人理解：

content-box:

padding值和border值不計算到內容（content）的寬度之內

即：一個盒子模型的總寬度=margin+padding+border+width;

border-box:

content的值包含了padding值和border值

即：一個盒子的總寬度=margin+width.

content-box的例子

div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}

<div class="container">
<div class="box">這個 div 占據左半部分。</div>
<div class="box">這個 div 占據右半部分。</div>
</div>

　　顯示效果：

border-box的例子

div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}

<div class="container">
<div class="box">這個 div 占據左半部分。</div>
<div class="box">這個 div 占據右半部分。</div>
</div>

顯示效果

注：例子來源於W3C幫助文檔