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. 兼容性

IE	Edge	Firefox	Chrome	Safari	Opera	ios	android
10+	12+	28+	4+	6.1+	12.1+	7+	4.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;
}

效果图

使用`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;
}

效果图

使用`content-Box`效果图

6. 经验分享

推荐大家设置 Box-sizing 为border-Box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。

7. 小结

如果不设置 Box-sizing 不同浏览器会有不同的计算方式。