本文已参与「新人创作礼」活动，一起开启掘金创作之路。
盒子模型是css中一个经典的模型，他包括了内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性像我们日常中所见到的盒子，所以叫它盒子模型。
1. 盒子模型概念
CSS盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素
元素框的总宽度 = 元素的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度
元素框的总高度 =元素的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度
2. 盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
标准盒子模型
IE盒子模型
3. box-sizing
在CSS 盒子模型定义里，对一个元素所设置的width与height只会应用到这个元素的内容区。如果这个元素有任何的border或padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这点会影响你的布局。
box-sizing 属性可以被用来调整这些表现:
-
content-box是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 -
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
如果是开发一个系统，首先应该将box-sizing设置为border-box，这样会给你省不少页面问题。
