1，Syntax:
/* Keyword values */ box-sizing: content-box; box-sizing: border-box; /* Global values */ box-sizing: inherit; box-sizing: initial; box-sizing: unset;
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
2，兼容：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
3,什么时候用？
1，设置内边距
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>border-box</title>
6 <style>
7 .box {
8 width: 100px;
9 height:100px;
10 border: 20px solid #000;
11 -webkit-box-sizing: border-box;
12 -moz-box-sizing: border-box;
13 box-sizing: border-box;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="box">默认border是外边距，设置外边距的话，可以用border-box</div>
19 </body>
20 </html>
二，calc();
一般在流体布局上
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .demo {
8 background: black;
9 font-size:0;
10 }
11 .box {
12 display:inline-block;
13 margin:20px;
14 background: #f60;
15 height: 50px;
16 width:calc(25% - 20px*2);
17 }
18 .box:nth-child(4n){
19 /*margin-right:0;*/
20 /*width:calc(25% - 30px);*/
21 }
22 </style>
23 </head>
24 <body>
25 <div class="demo">
26 <div class="box"></div>
27 <div class="box"></div>
28 <div class="box"></div>
29 <div class="box"></div>
30 <div class="box"></div>
31 <div class="box"></div>
32 <div class="box"></div>
33 <div class="box"></div>
34 <div class="box"></div>
35 <div class="box"></div>
36 <div class="box"></div>
37 </div>
38 </body>
39 </html>
1,这里用的是magin
2，如果用margin-right:20px,则右边就多出20px:
可以选择在父级窗口margin-right:-30px;就显示均匀了
这里注意，在使用calc的时候， width:calc(25% - 30px);这里的减号一定要用空格隔开。
三，flex布局的话，这里就讲的多了，是主流布局，在布局类下有详细的说过，可以翻看。