[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[用户界面属性](#)» 相关内容： [**其它用户界面属性**选择其它项](#) - [outline](#) - [outline-width](#) - [outline-color](#) - [outline-style](#) - [outline-offset](#) - [nav-index](#) - [nav-up](#) - [nav-right](#) - [nav-down](#) - [nav-left](#) - [cursor](#) - [zoom](#) - [box-sizing](#) - [resize](#) - [ime-mode](#) # box-sizing - **版本：CSS3** - 继承性：无 ### 语法： **box-sizing**：content-box | border-box **默认值**：content-box ### 取值： content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型。 ### 示例： - #### content-box: `.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }`  - #### border-box: `.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }`  ### 说明： **设置或检索对象的盒模型组成模式。** - 对应的脚本特性为**boxSizing**。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>版本</th> <td class="unsupport">6.0-7.0</td> <td rowspan="3" class="experimentsupport">4.0-8.0</td> <td rowspan="3" class="support">5.1</td> <td rowspan="3" class="support">13.0</td> <td rowspan="3" class="support">11.50</td> </tr><tr><th>版本</th> <td class="experimentsupport">8.0</td> </tr><tr><th>版本</th> <td class="support">9.0</td> </tr></tbody></table> ### 写法： | 内核类型 | 写法(box-sizing) | |-----|-----| | Webkit(Chrome/Safari) | box-sizing | | Gecko(Firefox) | -moz-box-sizing | | Presto(Opera) | box-sizing | | Trident(IE) | IE8:-ms-box-sizing/IE9:box-sizing | ### 示例： content-box border-box Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved