语法：
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 )。此属性表现为怪异模式下的盒模型。
例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS:box-sizing</title>
<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>
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
