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

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

• content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型
• border-box：怪异盒模型，低版本IE浏览器中的盒模型

现代浏览器和IE9+默认值是content-box。
语法格式：

box-sizing：content-box | border-box

 

区别：

• content-box：padding和border不被包含在定义的width和height之内。
  盒子的实际宽度=设置的width+padding+border
• 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代码：

<script> var div =document.getElementsByTagName("div"); console.log("content-box宽度="+div[0].offsetWidth); console.log("border-box宽度="+div[1].offsetWidth); </script>

 

运行结果：

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