# CSS盒模型
CSS的 盒模型 从内向外依次是：
Content(内容) ->Padding(内边距) ->Border(边框) ->Margin(外边距)
# 盒模型分为 标准盒模型 和 IE盒模型
区别是对于元素宽度的计算方式不同
标准盒模型：Width = Content
IE盒模型：Width = Content + Padding + Border
# CSS属性 box-sizing 可以抹平 标准盒模型 和 IE盒模型 的差异
border-box：DOM元素的宽度按照 Content + Padding + Border 来计算
content-box：DOM元素的宽度按照 Content 来计算
# W3C 对于 box-sizing 的解释：
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 打为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |