CSS Calc運算

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

參考資料：

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包：

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs

ann71727

View all posts