box-sizing与calc()与flex

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 
 2 
 3 
 4     
 5     
 6     
16 
17 
18 
默认border是外边距，设置外边距的话，可以用border-box
19 
20 

二，calc(); 

一般在流体布局上

 1 
 2 
 3 
 4     
 5     
 6     
23 
24 
25 

26     

27     

28     

29     

30     

31     

32     

33     

34     

35     

36     

37 
38 
39 

1,这里用的是magin

 

2，如果用margin-right:20px,则右边就多出20px:

可以选择在父级窗口margin-right:-30px;就显示均匀了

 

这里注意，在使用calc的时候， width:calc(25% - 30px);这里的减号一定要用空格隔开。

三，flex布局的话，这里就讲的多了，是主流布局，在布局类下有详细的说过，可以翻看。