对css3中box-sizing属性的理解

用法简介

box-sizing属性主要的取值有content-box，border-box和inherit,今天主要对前两者进行区别

image.png

一般浏览器默认设置为content-box，就是我们平常使用的符合w3c标准的盒模型，设置的宽高仅仅是内容的宽高，整个div的宽度（BoxWidth）可以总结： BoxWidth = width+padding+border，当我们想设置一个固定宽高的盒子，就必须算出内容所占的宽度和高度，使用width和height设置即可，可见使用content-box很麻烦。
但border-box就有所不同了，它给我们带来了便利，当我们设置后，我们就不必进行计算，要想设置多大的盒子，我们直接使用width和height设置即可，最后内容的大小浏览器会自动呈现。width = contentWidth+padding+border。

浏览器支持情况

image.png

现阶段大多数浏览器都支持box-sizing属性，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-。

到此box-sizing属性就介绍完毕了