calc

網頁前端UI設計中，很多時候會需要經由計算調整數值，本文說明如何操作css變數及計算功能。 CSS變數 先看一段範例: :root { --mainHeight: 100vh; } div.main { height: var(--mainHeight); } :root: 就是在全域設定變數。 變數設定規則: CSS宣告變數規則是開頭為--。 使用變數: 使用變數需使用var()呼叫。 區分大小寫: 變數名稱是區分大小寫的喔。 CSS數值計算 先看一段範例: :root { --mainHeight: calc(100vh - 100px); } div.main { height: var(--mainHeight); } 這段程式表示--mainHeight變數值為視窗高度減掉10pixel。 calc() 使用calc()函式即可在CSS中計算數值。 須注意在做"+"、"-"運算時，運算符號前後需有空白，"×"、"÷"不用預留空白。 Work example: calc(10px + 10px); Not work example: calc(10px+10px);

calc

[CSS] CSS變數設定，屬性值計算

Headline