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,设置内边距
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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();
一般在流体布局上
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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布局的话,这里就讲的多了,是主流布局,在布局类下有详细的说过,可以翻看。