2.2 CSS3 盒子模型(新增属性box-sizing)

两种方式的区别

也就是说，原本的content-box是以保证content内容大小不变为前提的盒子模型，也是正常的盒子模型，
而border-box则采取了以牺牲content内容大小为前提，来保证整个大盒子的宽高不变，也就是说随着padding和border的增大，content的范围会变小，所以也被称为怪异盒模型。

图解

前提，padding: 10px 宽高都为200px
原生的content-box
可以看到中间蓝色的content部分 大小为我们设置的 width 和 height

新的border-box

可以看到 中间content的部分被自动减去了padding的长度，我们设置的宽高为整个盒子的大小而不再是只属于 content 的。

使用场景

这种盒子模型是非常好的，因为我们以前为了让盒子不变还要煞费苦心去调试大小，现在我们就用这个border-box就好了，
所以可以在CSS初始化中，将盒子模型直接设置为该属性，以下以米哈游的官网预设为例：

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

可以看到米哈游官网已经预设了border-box，可见其重要性，其中-webkit-box-sizing是为了兼容谷歌和Safari浏览器。