css3 属性——calc()

    其实在之前学习CSS3的时候，我并没有注意到有calc()这个属性，后来在看一个大牛的代码的时候看到了这个，然后就引发了后来的一系列的查找、学习，以及这篇博客的诞生。好了，废话不多说了，来干正事。

一.基本介绍
   其实，calc()这个形式看起来就很容易让人想到Javascript里的函数，当然他不是js里的函数，但是他有着类似函数的功能，可以用来计算，括号里是一个表达式，通常用calc()来指定元素的长度，不管是width、height、border还是padding等都可以用他来指定。说白了，calc()就是css3的一个指定元素长度的属性，他的特殊之处在于他可以做计算，而且支持混合使用各种单位，比如%、px、em等。所以这个属性特别适用于那些自适应的布局。
 兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持（据说在使用时要加上供应商前缀，但是我测试了一下，不加也是可以用的），但是在移动端的支持不是很好。
二.基本用法

   .element{
        width:calc(expression);
   }

其中，expression是一个用来计算长度的表达式，支持“+”，“-”，“*”，“/”运算符。
特别声明：表达式中有“+”，“-”运算符的，前后必须要有空格，例如 “width:calc(100% - 20px)”这种写法；而对于“*”，“/”并没有这种要求，但为了风格的统一，建议前后也要留空格。

三.来看一个例子

  <div class="container">
      <div class="box"></div>
  </div>

加一些基本样式:

  .container{
     background:red;
     width:300px;
  }
  .box{
     background:skyblue;
     width:100%;
     height:200px;
  }

在浏览器中的效果是这样的(因为.box的宽度是100%，所以完全遮住了.container元素)：

像这种宽度设置的是100%,若在加上padding,或者border,就会将外层盒子撑破，就像下面这样：

 .container{
     background:red;
     width:300px;
     padding:20px 0;/*加这个padding是为了能看到这个元素，不被box全部遮住*/
  }
  .box{
    background:skyblue;
     width:100%;
     height:200px;
     padding:0 20px;
  }

效果是这样的（盒子被撑破了）：

对于这种情况，以及其他一些用百分比来指定长度的情况，用calc()就能避免这种错误，上面的例子可以写成下面这样：

 .container{
     background:red;
     width:300px;
     padding:20px 0;
  }
  .box{
     background:skyblue;
     width:90%;          /*写给那些不支持calc()属性的浏览器*/
     border:2px solid green;
     padding:0 20px;
     width：calc(100% - (20px + 2px) * 2);  /*用100%减去左右两个20px的padding和2px的border*/
     height:200px;
  }

然后效果是这样的：

 

对于calc()，总结以下要点：

    1.兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+支持较好，移动端支持不理想；

    2.表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、em等）;

    2.表达式中有“+”，“-”运算符的，前后必须要有空格。

   

 更多博客，请移步：个人小站