終於是等到這個功能了,CSS3增加了Calc()這個function進行數值運算,大部分用於容器寬度或高度的計算,這讓CSS的開發更快、靈活度更高並增加重複使用的可能性,Calc()還有一個很棒的優點,可以針對不同單位進行運算。
支援運算:
+ | 加 |
– | 減 |
* | 乘 |
/ | 除 |
CSS Calc運算
下方範例可以得到欄位寬度,可用來製作自己的網格系統
.column-1 { width: calc( 100% / 1); } .column-2 { width: calc( 100% / 2); } .column-3 { width: calc( 100% / 3); }
不同單位運算
#element1 { width: calc(50% - 2em); }