box-sizing属性

box-sizing属性默认值是content-box；指定了标准的盒模型。

如果替换为box-sizing:border-box，浏览器将会为那个元素应用IE的盒模型，即width和height属性将包含边框(border)和内边距(padding)。当想以百分比形式为元素设置总体尺寸，又想以像素单位指定边框和内边距时，边框盒模型特别有用：

<div style="box-sizing:border-box; width:50%; padding:10px;  border:2px solid #ddd;">     
</div>

box-sizing在当前浏览器中都支持，但是还没有不带前缀的通用实现：在chrome和Safari中使用-webkit-box-sizing。在Firefox中使用-moz-box-sizing。在Opera和IE8及其更高版本中，可以不带前缀的使用box-sizing。

边框盒模型在css3中的一个可选方案是使用盒子尺寸的计算值：

<div style="width:calc(50%-12px);padding:20px;border:solid 2px #eee;"></div>

在IE9中支持使用calc()计算css的值，在Firefox 4 为-moz-calc()。

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认值：	content-box
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。