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.表達式中有“+”，“-”運算符的，前后必須要有空格。

   

 更多博客，請移步：個人小站