CSS3 设置border和padding不撑开盒子
一、问题描述
普通的盒子模型我们设置border、padding会将盒子撑大,通过box-sizing指定盒子模型可以改变盒子大小的计算方式；
默认计算方式：
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
二、box-sizing属性说明
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等，具体值如下：
| 值 | 说明 |
| content-box | 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 |
| border-box | 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 注：border-box 不包含 margin。 |
| inherit | 指定 box-sizing 属性的值，应该从父元素继承 |
通过设置 box-sizing: border-box; 设置border的时候不会撑开盒子同理，padding也是如此。
您阅读本篇文章共花了： 