先来看一下什么是盒模型
- 可以将其认为是每一个html元素都是一个区块，然后这个区块内又包含着其他区块，我们就将其理解为一个层层包裹的盒子
- 盒模型内部包含 content, padding, margin, border
盒模型包括哪几种
- css的盒模型包括content盒模型（W3C标准盒模型）以及border盒模型（IE盒模型）
两种模型之间的区别
content-box（W3C标准盒模型）中的width和height包含border和padding以及内容，即：
-
width = border + padding + 内容的宽度
-
height = border + padding + 内容的高度
border-box（IE盒模型）中的width和height只包含内容，即：
- width = 内容的宽度
- height = 内容的高度
那么我们如何来设置这两种模型
可以通过如下代码实现：
box-sizing：content-box
box-sizing：border-box
那么哪种盒模型好用呢，答案是boder-box好用，不要问为什么
