本文翻译自CSS3.info，并稍加改动，原文地址：Box-sizing, box-model fixes for the simple people。

永远不能完全理解box模型大小的计算？CSS3提供了一个新属性，即：box-sizing，它可以让你有计算的改变浏览器中元素的宽度。

box-sizing一共有content-box和border-box两个属性，其中content-box是默认属性：
content-box: element width=content+border+padding（此值维持css2.1盒模型的组成模式）
border-box:element width=content（此值改变css2.1盒模型组成模式）

Firefox支持这个属性需要加上前缀 –moz-，即 –moz-box-sizing；Webkit内核浏览器使用的是 -webkit-box-sizing；IE8以上浏览器使用的是 –ms-box-sizing；Opera直接用 box-sizing就可以了。

下面是一个取自W3C的例子，并稍加改动：W3C中关于box-sizing的例子。

这个DIV应该站在左半边
这个DIV应该站在右半边

上面两个DIV应该会水平并排显示，每一个DIV（包括边框）将占总容器的50%。如果正好相反，一个DIV堆叠在另一个DIV的上面，就说明你的浏览器不支持box-sizing。

CSS代码：

div.container {
	width:30em;
	border:1em solid black;
}

div.split {
	-ms-box-sizing:border-box; //IE8+
	-moz-box-sizing:border-box; //Firefox
	-webkit-box-sizing:border-box; //Webkit内核（Chrome、Safari）
	box-sizing:border-box; //标准样式 Opera
	width:50%;
	border:1em silver ridge;
	float:left;
}

HTML代码:

<div class="container">
	<div class="split">这个DIV应该站在左边。</div>
	<div class="split">这个DIV应该站在右边。</div>
	上面两个DIV应该会水平并排显示，每一个DIV（包括边框）将占总容器的50%。如果正好相反，一个DIV堆叠在另一个DIV的上面，就说明你的浏览器不支持box-sizing。
</div>