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 <!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>
border-box.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>
calc.html

1,这里用的是magin

 

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

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

 

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

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

 

posted @ 2017-04-01 06:34  最爱小虾  阅读(641)  评论(0)  编辑  收藏  举报