浅谈CSS3中的box-sizing（content-box与border-box）

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box、border-box。默认值是content-box。
语法格式：box-sizing：content-box | border-box

区别：
1.content-box：padding和border不被包含在定义的width和height之内。
对象的实际宽度=设置的width+padding+border
2. border-box：padding和border被包含在定义的width和height之内。
对象的实际宽度=设置的width（padding和border不会影响实际宽度）

我们新建一个HTML页面来详细解释
div{
height:200px;
width:200px;
background:green;
margin:50px;
border:20px solid black;
padding:20px;
}

.div1{    box-sizing:content-box;   }.div2{    box-sizing:border-box;     }

javascript代码：

var div =document.getElementsByTagName(“div”);
console.log(“content-box宽度=”+div[0].offsetWidth);
console.log(“border-box宽度=”+div[1].offsetWidth);

运行结果：

—————————————————————————————
分析：