Box-sizing 盒類型

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

1. 官方定義

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

2. 解釋

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

Chrome 瀏覽器使用的是標(biāo)準(zhǔn)盒模型 content-Box，IE 盒模型是 border-Box。

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

3. 語法

Box-sizing: content-Box | border-Box

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

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

content-Box 的計(jì)算方式是:

width = content width;

height = content height

border-Box 的計(jì)算方式是：

width = border + padding + content width

heigth = border + padding + content heigth

4. 兼容性

5. 實(shí)例

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

<div class="demo">網(wǎng) CSS3 學(xué)習(xí)分享</div>

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

效果圖

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

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

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

效果圖

6. 經(jīng)驗(yàn)分享

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

7. 小結(jié)

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