CSS3 calc() 會計算的屬性

可用的屬性：

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

之前咱們能夠使用box-sizing:border-box;來設置盒子的屬性爲不加上邊距。如今咱們又多了一個選擇了。但要注意，二者只能使用一個哦，不然就會形成衝突了。

怎麼使用

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

示例：

好比三局平均分佈的佈局，中間間距爲5像素。

佈局使用

<style>
*{margin: 0; padding: 0;}
.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}
.col-3:nth-child(3){margin-right: 0;}
</style>

兼容性問題