終於是等到這個功能了,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);
}