toc

Intro

css3规范中新增了UI（User-Interface)模块,用来控制互用界面的呈现方式。符合标准的现代浏览器中盒子的width和height属性代表的是盒子的content区域，而在ie7以下的浏览器中对元素的呈现方式中border和padding都包含在width和height中，这样就造成了混乱，因此css3中新增了box-sizing属性来定义盒模型的尺寸解析方式，其值有：

• content-box：该属性维持css3以前盒模型的组成模式，即元素width/height=border+padding+content。
• border-box：标准值，即元素width/height=content。

首先css的代码为：

.box { width:250px; height:250px; border:5px solid #690; padding:10px; background-image:url(http://image2.hicc.pro/placeholder250.jpg); background-repeat:no-repeat; float:left; margin:20px; } #box1 { box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; } #box2 { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

由上述代码可知，盒子的width和height为250px，背景图的长宽也是250opx设置了10px的padding，由下图配合demo可知，左一和左二位标准呈现方式，也是现代浏览器的默认呈现方式，而左三即为content-box方式，将width/height呈现为border+padding+content。
[![css3-box-sizing](https://image.hicc.pro/wp-content/uploads/2012/10/css3-box-sizing3.png "css3-box-sizing3")](https://image.hicc.pro/wp-content/uploads/2012/10/css3-box-sizing3.png)css3-box-sizing