css3中樣式計算屬性calc()的使用和總結

calc的介紹

在css3樣式中有一個類似與函數的計算屬性calc()，它主要用於指定元素的長度，無論是border、margin、pading、font-size和width等屬性都可以使用calc來設置動態值。calc支持的運算單位有rem , em , %, px，calc是支持單位的混合使用的，其計算優先級別和數學一致。

 

calc的用法  

.elm{
        width:calc(expression);
}

其中，expression是一個用來計算長度的表達式，支持“+”，“-”，“*”，“/”運算符。

注意1： 表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；而對於“*”，“/”並沒有這種要求，但為了風格的統一，建議前后也要留空格。例如：

width: calc(100% -8px); /* 這樣會出錯,結果為0 */
width: calc(100% - 8px); /* 當 + -  符號用空格隔開時,運算成功 */

 

注意2：使用 * / 運算符時,必須保證有一個值為數值類型;

 

calc的兼容:

在IE9+、FF4.0+、Chrome19+、Safari6+支持較好，移動端支持不理想。 如圖： 

兼容性前綴： 

.elm{
  width: calc(80% - 10px);
  width: -moz-calc(80% - 10px);   /*Firefox*/
  width: -webkit-calc(80% - 10px);   /*chrome safari*/
}

　　

 

在less如何使用

由於less中會把它當表達式計算掉了，需要在參數外面加上: ~("expression")，如： 

.elm{
  width: calc(~"100% - 80px");
}

　　

或者使用e(“”)包裹在里面，如：

width:e("calc(100% - 80px)");

　　

可如果要用變量怎么用呢？也不復雜，像下面這樣就搞定啦。 

.class {
  @cap: 50px;
  height: calc(~"100% - @{cap}");
}

　　

辦公資源網址導航 https://www.wode007.com

calc實現適應布局例子

必須使用設置百分比頁面同時又有margin時，會出現不夠滿擠到下一行的情況，所以要用到calc重新計算百分比

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-xs-6"></div>
        <div class="col-sm-4 col-xs-6"></div>
        <div class="col-sm-4 col-xs-12"></div>
    </div>
    <div class="row">
        <div class="col-sm-3 col-xs-3"></div>
        <div class="col-sm-6 col-xs-6"></div>
        <div class="col-sm-3 col-xs-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-1 col-xs-2"></div>
        <div class="col-sm-1 col-xs-2"></div>
        <div class="col-sm-2 col-xs-8"></div>
        <div class="col-sm-2 col-xs-3"></div>
        <div class="col-sm-6 col-xs-3"></div>
    </div>    
</div>

　　

@media screen and (min-width:768px){
    .col-sm-1{
        width: calc(8.1% - 20px);
    }
    .col-sm-2{
        width: calc(16.7% - 20px);
    }
    .col-sm-3{
        width: calc(25% - 20px);
    }
    .col-sm-4{
        width: calc(33.3% - 20px);
    }
    .col-sm-6{
        width: calc(50%- 20px);
    }
    .col-sm-12{
        width: calc(100% - 20px);
    }
}