什么是盒模型

页面就是由一个个盒模型堆砌出来的，每个 HTML 元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面所占的实际宽度是 margin + border + padding + content 的宽度相加。

标准模型

属性 width 、 height 只包含 content ，不包含 border 和 padding 。

IE模型

属性 width 、 height 的长度为 content + border + padding。

通过设置 box-sizing: content-box; 可以设置为标准模型。 box-sizing: border-box; 可以设置为 IE 模型。