css3中的box-sizing属性

盒子宽度、高度计算公式：
css元素宽度 = width + padding + border
css元素高度 = height + padding + border

css3之前，当我们需要呈现一个宽度为200px的盒子时，我们需要减去它本身的内边距、边框，然后得知属性的width应该设置为多少。例如：padding为20px, border为3px，那么width=200-202-32=154px

css3中的box-sizing属性帮我们很方便的解决了上述问题：

语法：box-sizing: content-box | border-box | inherit;

要解决上面例子中的问题，只需设置box-sizing:border-box，width:200px，如下图所示

box-sizing默认取值为content-box，所有属性值不变，则盒子尺寸变为下图所示

浏览器兼容性

IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。