Box-sizing 盒類型

它主要用來告訴瀏覽器怎么計算元素的展示寬高的。

1. 官方定義

Box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。

2. 解釋

在開發過程中，當有一個 固定寬高的元素帶有 boder 或 padding 的時候，它在 IE 中展示和 Chrome 中是不同的，如果我們不設置這個屬性，那么在 IE瀏覽器中它的實際寬高是小于 Chrome 瀏覽器的這是為什么呢？

Chrome 瀏覽器使用的是標準盒模型 content-Box，IE 盒模型是 border-Box。

下面就是一個盒模型的結構圖

3. 語法

Box-sizing: content-Box | border-Box

它接受一個參數 content-Box 或 border-Box。

上圖是一個盒模型結構

content-Box 的計算方式是:

width = content width;

height = content height

border-Box 的計算方式是：

width = border + padding + content width

heigth = border + padding + content heigth

4. 兼容性

5. 實例

1. 不是設置 Box-sizing 分別在不同瀏覽器中的展示。

<div class="demo">網 CSS3 學習分享</div>

.demo{
    width:px;
    height:px;
    background:#000;
    color:#fff;
    padding:px;
    border:px solid red;
}

效果圖

說明:左側是 Chorme 瀏覽器右側是低版本 IE 瀏覽器。

2. 給上面 demo 中設置 Box-sizing 為 border-Box。

.demo{
    width:px;
    height:px;
    background:#000;
    color:#fff;
    padding:px;
    border:px solid red;
    Box-sizing:border-Box;
}

效果圖

3. 給上面 demo 中設置 Box-sizing 為 content-Box。

.demo{
    width:px;
    height:px;
    background:#000;
    color:#fff;
    padding:px;
    border:px solid red;
    Box-sizing:content-Box;
}

效果圖

6. 經驗分享

推薦大家設置 Box-sizing 為border-Box 這樣方便我們寫樣式不必在去減去 padding 也不會造成 IE 和 Chorme 這類瀏覽器展示不同的 bug 。

7. 小結

如果不設置 Box-sizing 不同瀏覽器會有不同的計算方式。