box-sizing

语法

  • 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:此属性表现为标准模式下的盒模型。

说明

设置或检索对象的盒模型组成模式。

标准盒模型代码:

.test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

怪异盒模型代码:

.test1{
    box-sizing:border-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}
  • 对应的脚本特性为boxSizing。

兼容性

Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-7.0 2.0-28.0-moz- 4.0-9.0-webkit- 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
8.0+ 29.0+ 10.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;background:#eee;}
.test2{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;background:#eee;margin-top:20px;}
</style>
</head>
<body>
<div class="test">content-box</div>
<div class="test2">border-box</div>
</body>
</html>