CSS3 box-sizing 属性

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>
<head>
<meta charset="utf-8">
<title>Box Sizing Demo</title>
<style>
.content-box{    
    box-sizing:content-box;    
    width:200px;
    height:200px;
    padding:10px;
    border: 20px solid blue;    
    background-color:#F00;
    margin:20px;
    color:white;
    font-size:xx-large;
    box-shadow:5px 5px 5px grey;
    text-shadow:5px 5px 5px grey;
    line-height:200px;
    text-align:center;
    border-radius:5px;
    -ms-border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.border-box{
    box-sizing:border-box;
    width:260px;
    height:260px;
    padding:10px;
    border: 20px solid blue;    
    background-color:#F00;
    margin:20px;
    color:white;
    font-size:xx-large;
    box-shadow:5px 5px 5px grey;
    text-shadow:5px 5px 5px grey;
    line-height:200px;
    text-align:center;
    border-radius:5px;
    -ms-border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
</style>
</head>
<body>
<div class="content-box">
Content Box
</div>
<div class="border-box">
Border Box</div>
</body>
</html>

效果图:

点击此处链接.