盒模型
css 盒模型本质就是将一个元素看成一个盒子，它包括了外边距（margin）、边框（border）、内边距（padding）、内容区（content）。
css 盒模型包括标准盒模型和 IE 盒模型（怪异盒模型），不同的盒模型计算元素宽度（width）和高度（height）的方式不同。
标准盒模型的宽度（width） = 内容区（content）
IE盒模型的宽度（width） = 边框（border） + 内边距（padding） + 内容区（content）
计算高度（height）的方式同理。
我们可以通过 box-sizing 属性来控制元素采用哪种盒模型：
css
.element {
box-sizing: content-box | border-box | inherit;
}- content-box：默认值，设置元素采用标准盒模型来计算宽高
- border-box：设置元素采用IE盒模型来计算宽高
- inherit：继承父元素的 box-sizing 属性的值
