CSS3 box-sizing 属性（框大小）
盒模型大家都不陌生，就像我们经常遇见被问到的盒模型到底是什么？下面这个 新属性会帮到大家 他可以帮我们有效的控制宽高，甚至避免横向滚动条的出现～
box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
请大家看下面的的两个例子
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
div1和div2在屏幕上展示的宽度是不一致的，padding是内边距，为什么会撑开？
请大家注意，内边距是向里的，但是没有谁规定它向内扩充会影响到内容，它为了不与内容（这是重要滴～）挤一挤，就会向外边扩展，导致我们还原设计稿的时候不能想当然的设定宽度，我们需要减去padding和border挤出来的厚度
当然也可以加一条语句---重点！box-sizing：border-box
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
回过头来在div2上添加这条语句即可。
此时为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3663
