css3 calc會計算的屬性

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。

calc()可使用數學運算中的簡單加（+）、減（-）、乘（*）和除（/）來解決問題，並且還能夠根據單位如px,em,rem和百分比來轉化計算。

注意在寫calc表達式中

width: calc(50% - 20px);

-右側要有空格，不然這行代碼無效。

這是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);
    }
}