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 /*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的时候， calc(25% - 30px);这里的减号一定要用空格隔开。
三，flex布局的话，这里就讲的多了，是主流布局，在布局类下有详细的说过，可以翻看。