例
指定<div>元素应该有填充和边框列入元素的总宽度和高度：
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
试一试» 更多"Try it Yourself"下面的例子。
定义和用法
盒上浆属性用来告诉浏览器什么上浆性能(width and height)应包括。
他们应该包括边界框？ 或者仅仅是内容框（这是width和height属性的默认值）？
| 默认值： | content-box |
|---|---|
| 遗传： | no |
| 动画： | no. Read about animatable |
| 版： | CSS3 |
| JavaScript语法： | object .style.boxSizing="border-box" Try it |
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次是-webkit-号码或-moz-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSS语法
box-sizing: content-box|border-box|initial|inherit;属性值
| 值 | 描述 |
|---|---|
| content-box | 默认。 的宽度和高度属性(and min/max properties)仅包括的内容。 边界，填充，或余量不包括 |
| border-box | 宽度和高度的属性(and min/max properties)包括内容，填充和边界，但不是保证金 |
| initial | 将此属性设置为默认值。 阅读关于初始 |
| inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
相关页面
CSS3教程： CSS3盒大小调整
HTML DOM参考： boxSizing property