box-sizing属性值有两个：content-box（default），border-box。

content-box：border和padding不计算入width\height之内

border-box：border和padding计算入width\height之内

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content-box{
        width: 100px;
        height: 100px;
        box-sizing: content-box;
        border: 5px solid #ccc;
        padding: 10px;
        margin: 0 auto;
        background: green;
    }
 
    .border-box{
        width: 100px;
        height: 100px;
        box-sizing:border-box;
        border: 5px solid #ccc;
        padding: 10px;
        margin: 0 auto;
        background: red;
    }

　　HTML：

?
1
2
<div class="content-box"></div>
<div class="border-box"></div>

效果，请用Chrome查看：

 

 

 
 
F12查看一个对应的盒模如下：