语法: box-sizing:content-box | border-box 默认值:content-box 适用于:所有接受width和height的元素 继承性:无 取值: 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。 兼容性:浅 浏览器支持 Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 Firefox 支持替代的 -moz-box-sizing 属性。 -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ <!DOCTYPE html> <html> <head> <style> .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #6BB4DF; margin-bottom:30px;} .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #6BB4DF; } } </style> </head> <body> <div class="test1">box-sizing:content-box;图宽为250px</div> <div class="test2">box-sizing:border-box;图宽为200px</div> </body> </html>