#### 盒子属性 css3中增加的 `box-sizing` 语法：`box-sizing: content-box|border-box|inherit:` | 值 | 说明 | | :-- | :-- | | content-box | 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 | | border-box | 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 **注：**border-box 不包含 margin。| | inherit | 指定 box-sizing 属性的值，应该从父元素继承 | 用法：最主要的用法是规定容器元素的最终尺寸计算方式。 ___ 代码： ~~~ <style> .box{ width: 100px; height: 100px; background-color: red; border: 10px solid; box-sizing: content-box; // content-box 默认的写不写都一样 } </style> <div class="box"></div> ~~~ 效果：  代码： ~~~ <style> .box{ width: 100px; height: 100px; background-color: red; border: 10px solid; box-sizing:border-box; } </style> <div class="box"></div> ~~~ 效果：  加上了 ` box-sizing:border-box;` 盒子永远都只有100px ,boder、padding、的值会分内容的值。他们三个加上就是100px