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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料