第四章：數值與單位（4）

第 11 屆 iThome 鐵人賽

DAY 15

Modern Web

CSS大全閱讀筆記系列第 15 篇

11th鐵人賽

Camellus

2019-10-01 23:21:52

642 瀏覽

分享至

計算值：
a. 利用calc()做基礎的數學計算，遵循先乘除後加減和括弧優先計算，不支援指數計算。
b. 只要使用<length>（長度）、<frequence>（頻率）、<angle>（角度）、<time>（時間）、<percentage>、<number>、<integer>等數值型別的地方，calc()就能支援，單位也沒有限制。
c. calc()會進行基礎的驗證，因此有所限制：
- +與-符號兩側中至少一側需要有空白，這是為了避免與負值混淆，但*和/沒有限制。
- +與-的兩側需為相同型別，唯<number>和<integer>可以混用，結果會是<number>，因此clac(5 + 2.7)是正確的。
- +與-的兩側需為相同度量，因此clac(5px + 2.7)是錯誤的，但因此clac(5px + 2.7em)是正確的，因為px和em都是長度單位。
- *運算式的其中一個運算子必須是<number>或<integer>，所以clac(5px * 1.5)是正確的，但clac(2.5em * 2.7em)就不正確了（單位不能是平方數）。
- /運算式右側必須是<number>或<integer>，左側如果是<integer>，會是<number>型別，否則會和左側度量單位相同，例如clac(5px / 1.5)是合法的，單位會是px，而clac(50 * 2.5px)就是錯誤的運算式了。
- 所有除以零的運算式都屬於不合法運算式，所以不會出現像clac(30px * 0)的情況。
- 規範要求使用者代理對clac()必須支援至少20個運算子（包含數字、百分比與單位），如果超過使用者代理運算子數量限制的運算式，整個運算子整個運算式會被視為不合法。
屬性值：
a. 某些CSS能透過attr()從HTML元素的屬性取得數值。
b. 理論上所有屬性都能使用attr()，只要在表示式指定數值型別，但實際情況上的支援度仍須注意。