CSS 盒模型本质
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素。
简单点理解，就是把 HTML 元素看成一个一个的盒子。
我们做网页布局，就是用在 CSS 摆盒子。先用CSS设置好样式，然后将盒摆放在合适的位置。
盒模型的分类
盒模型主要分为两大类：W3C标准盒模型和IE盒模型。
也有人叫IE盒模型为怪异盒模型
W3C标准盒模型
组成部分
W3C盒模型图
由上图可知， W3C标准盒模型的范围包括： content 、padding、border、margin 几部分组成。
盒大小问题
在使用 CSS 设置样式的时候，通常会涉及到宽度和高度的计算。
而我们在计算W3C标准盒的宽度大小和高度大小的时候，并不把 margin算入。
盒宽度大小 = width + border + 左右paddingg，同理
盒高度大小 = height + border + padding
需要注意的是，如果我们不设置盒的 width / height 属性时，content 的大小有盒里面的内容决定。
存在的弊端
但是这样写时常会出现一个问题。举个例子：
原有的布局中，有一个 100 px * 100px 大小的盒，已经为盒设置了 width: 100px；height: 100px;
如果我们再给这个盒加上 padding 或者 border，那就会使盒子变大，可能会引发原有的布局往下掉。
再者每次修改 padding 或者 border 的大小后，我们都需要重新计算和设置 width / height 的属性值，否则亦可能会引发原有的布局往下掉。
IE盒模型
组成部分
从上图可以看出，IE盒模型的范围也包括 margin、border、padding、content。
但是和W3C标准盒模型不同的是，IE盒模型的content部分包含了padding和border.
盒大小问题
盒宽度大小 = width 属性值
盒高度大小 = height 属性值
CSS3 的 box-sizing 属性
CSS3 中提供了 box-sizing 属性，我们可以通过它来指定盒模型。
它有2个值属性值：content-box（默认） 和 border-box。
根据设置的 box-sizing 属性值的不同，我们计算盒大小的方式会发生改变。
当我们为盒设置了 box-sizing: content-box; 时，表示采用W3C的标准盒模型。
当我们为盒设置了 box-sizing: border-box; 时，在盒的 width / height 属性已设置的情况下，再增加padding和border就不会撑大盒（前提padding+border不会超过width宽度），也就是说盒大小为 width / height。
这样就大量的减少了我们在修改 padding / border 的大小后，需要计算修改 width / height 属性值的工作所以实际开发中，我们通常都会使用 box-sizing: border-box;。包括在 Bootstrap 、Element UI 等框架中，它们的公用样式也是这样写的。
示例
看看下面两张图，体会一下两种盒模型的区别。
同样的代码，只是box-sizing的属性值不同，盒子大小不同。
默认，没有显示设置 box-sizing: content-box;
box-sizing: border-box;
