CSS之border-box与content-box

在css的面试题中，三句话不离盒子模型。相信很多小伙伴对于盒子模型都一知半解，但是被问到，又嗯、啊、这，半天说不到重点。今天我们就来一起学习一下盒子模型中的两个重要概念。

盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）

1、标准盒模型：content(内容) + border + padding + margin
2、怪异盒模型：width + height + margin

注意：在怪异盒模型中 border 、padding都被计算到width/height 里面里，也就是说你设置一个100px的宽高的div ，其后无论你怎么border、padding值是多少，你这个div的宽高一直都是100px

下面我们看代码说话

*border-box

 div {
       height: 100px;
       width: 100px;
       padding: 10px 0 30px;
       border: 1px solid red;
       box-sizing: border-box;
     }

从上图的代码中我们可以看出，我们设置div为border-box，使其变为怪异盒模型，content部分的宽高被压缩到了98*58。它的计算规则为:

width = 98（content）+ 0（padding）+2（左右border）
height = 58 （content）+ 10（上padding） + 30（下padding）+2（上下border）

*content-box

    div {
            height: 100px;
            width: 100px;
            padding: 10px 0 30px;
            border: 1px solid red;
            box-sizing: content-box;
        }

如上，我们设置了一个宽高为100px的div，他最终的content部分就是100px。而padding、border这些都是单独计算的，这也使得我们的盒子被撑大到了102*142，它的计算规则为：

height = 100（content高） + 10（上padding） +30（下padding）+2（上下border）
width = 100（content宽） + 0（padding）+ 2（左右border）