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:100px;
    height:100px;
    background:#000;
    color:#fff;
    padding:10px;
    border:5px solid red;
}

效果圖

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

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

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

效果圖

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

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

效果圖

6. 經驗分享

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

7. 小結

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