2、box-sizing
与上面不同的是，当你设置box-sizing:border-box以后，这就能达到你想要的目的。例如，上面我们想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。是不是看起来清晰多了。当再设置它的左右边框和左右补白后，它的内容区会自动调整。这可能更直接和一目了然。CSS代码如下：
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
如下图：
实际上，这更被设计者和开发者推崇。
3、box-sizing其它的值
box-sizing同样可以设置为content-box，这样设置CSS的宽度的时候仅仅是设置的它的内容区的宽度，浏览器默认都是如此。如我们1中举得例子。
box-sizing也可以设置为inherit，也就是说从父级元素中继承该属性。
4、浏览器兼容性
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上，很多reset.css或者normal.css里都包含如下CSS语句，也是比较赞成的用法：
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
结束语
看到这儿，相信你肯定明白了box-sizing的含义。那么同样告诉你的是，这是很多前端面试题常见的知识点之一。面试官通常会问你，CSS设置如下语句后*{box-sizing:border-box;},其作用是什么?相信你看到现在肯定会清楚的回答这个问题了。
