calc()是CSS3的一個計算長度單位的新功能,能使用數學四則運算方式。
1. 使用“+”“-”“*”“/”四則運算;
2. 可以使用百分比、px、em、rem等單位;
3. 可以混合使用各種單位進行計算。
例:
.thing {
width: 90%; /* fallback if needed */
width: calc(100% - 10px);
width: calc((100% - 12px) / 2);
width: calc(100%/3 - 2*1em - 2*1px);
}
4. 使用時,"+" & "-" 兩邊需加空格(一定要加), "*" & "/"兩邊是不用加空格(要加也是可以)
5. 瀏覽器的支援:IE9+ , Firefox4.0+ , Chrome , Safari , iOS Safari6.0+ , Android Browser 4.4+
寫法: width: -moz-calc((100% - 12px) / 2);
width: -webkit-calc((100% - 12px) / 2);
width: calc((100% - 12px) / 2);