使用方法：
- box-sizing: content-box;
- box-sizing: padding-box;
- box-sizing: border-box;
属性解析：
当设置为content-box时，盒子的宽度和高度同默认宽度（不包括padding，border）；
当设置为padding-box时，盒子的宽度和高度包括padding区域；
当时设置为border-box时，盒子的宽度和高度包括padding和border区域；
注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。
样例代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #000;
color: #fff;
margin: 30px auto;
padding: 30px;
border: 30px solid #f60;
}
.box-1 {
-moz-box-sizing: content-box;
}
.box-2 {
-moz-box-sizing: padding-box;
}
.box-3 {
-moz-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box-1">content-box</div>
<div class="box-2">padding-box</div>
<div class="box-3">border-box</div>
</body>
</html>
样例图片：（ff下测试）
1516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
