关于CSS3中的calc()函数用法，你没看错是CSS中的函数

     今天没事在看一些大牛的blog来增长见识，果然是受益匪浅啊，看到了一个写着如何动态计算容器的宽度简直让我有点惊讶！所以看完后果断的要拿过来收藏下。

       现在Web基本都在想着响应式发展，所有有时候我们会遇到一些难以处理的问题！比如我们有时候给Div设置了100%的宽度，正常下是这样的

1 <style type="text/css">
2 .box { width:300px; background:red; padding:3px 0 }
3 .calc { width:100%; background:#283ec9; height:50px;}
4 </style>
5 </head>
6 <body>
7 <div class="box">
8     <div class="calc"></div>
9 </div>

效果是这样的：

这样看起来是没有问题的，但是如果我们给里面的.calc添加一个border 或者padding的话在来看看效果先来border的

 1 <style type="text/css">
 2 .box { width:300px; background:red; padding:3px 0 }
 3 .calc { width:100%; background:#283ec9; height:50px;border: 3px solid 
 4 green}
 5 </style>
 6 </head>
 7 <body>
 8 <div class="box">
 9     <div class="calc"></div>
10 </div>
11 </body>

现在效果是这样的：

我们会看到边框有溢出容器范围，这肯定不是我们想要的效果。

在来看看padding的效果

 1 <style type="text/css">
 2 .box { width:300px; background:red; padding:3px 0 }
 3 .calc { width:100%; background:#283ec9; height:50px;padding:5px}
 4 </style>
 5 </head>
 6 <body>
 7 <div class="box">
 8     <div class="calc"></div>
 9 </div>
10 </body>

效果是这样的：

这个时候我们就可以使用calc来试试效果如何
代码如下：

 1 <! DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Calc Demo</title>
 5 <style type="text/css">
 6 .box { width:300px; background:red; padding:3px 0 }
 7 .calc { width:calc(100%-(5px + 3px));
 8         width:-ms-calc(100%-(5px + 3px));/*IE内核识别码*/
 9         width:-o-calc(100%-(5px + 3px));/*欧朋【opera】内核识别码*/
10         width:-moz-calc(100%-(5px + 3px));/*火狐内核识别码*/
11         width:-webkit-calc(100%-(5px + 3px));/*谷歌内核识别码*/
12         background:#283ec9;     
13          height:50px;padding:5px;border:3px solid green;}
14 </style>
15 </head>
16 <body>
17 <div class="box">
18     <div class="calc"></div>
19 </div>
20 </body>
21 </html

效果是这样的：

这次我不仅添加了border而且还添加了padding结果它并没有溢出，我们再来看看代码， width:calc(100% - (5px + 3px)) 其中100%就是获取当前div的width，减去的(5px + 3px)分别是border的宽度以及padding的内间距，当然calc也是需要按照不同浏览器去给添加相应内核识别码的，代码中已有显示说明 ，真是简单易用很不错！

 

此文仅为了增加自己对此方法的更好记忆，也算是开始向Web前端发展的一个转折记号，以后尽量多写点来丰富自己

posted @ 2015-02-19 19:10  Rey.real  阅读(476)  评论(0)    收藏  举报