CSS3的box-sizing属性详解

随着浏览器对HTML5及CSS3的支持，在移动端及自适应页面中CSS3.0发挥着很大优势；

下面我来给大家讲下CSS3.0的属性之一——box-sizing；

首先我们来讲下盒模型，具体对于CSS2熟悉的话，很清楚的知道CSS中盒模型的概念，在此我不再详续，实在不了解去参看w3cschool吧；

CSS3的box-sizing属性有两个取值：border-box、content-box：

当然不同的取值，意味着有所不同的计算及取值；

下面我们来个看个例子吧：

再看效果图计算后：

看了上面的图后：

下面我来总结下border-box与content-box的区别吧：

border-box的内边距及边框宽度是计算在总得宽度之内的，在上面的例子中内容框的实际宽度跟高度就只有60pxl了，但是content-box定义的宽度只是内容框的宽度，内边距及边框宽度是定义宽度之外的：

由此我们得到计算公式：

假设我们定义： width =  100px, border-width = 10px, padding = 10px;

border-box盒模型：content-width(实际宽度) = 100 - border-width（20） -  padding （20） = 60 ;

content-box盒模型： content-width(实际宽度)  =  100 + border-width（20） +  padding （20） = 140