box-sizing 盒類型

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

1. 官方定義

box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。

2. 慕課解釋

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

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

下面就是一個盒模型的結(jié)構(gòu)圖

3. 語法

box-sizing: content-box | border-box

它接受一個參數(shù) content-box 或 border-box。

上圖是一個盒模型結(jié)構(gòu)

content-box 的計算方式是:

width = content width;

height = content height

border-box 的計算方式是：

width = border + padding + content width

heigth = border + padding + content heigth

4. 兼容性

5. 實例

1. 不是設(shè)置 box-sizing 分別在不同瀏覽器中的展示。

<div class="demo">慕課網(wǎng) CSS3 學習分享</div>

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

效果圖

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

2. 給上面 demo 中設(shè)置 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 中設(shè)置 box-sizing 為 content-box。

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

效果圖

6. 經(jīng)驗分享

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

7. 小結(jié)

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