calc()函式，可以做任何數字形態的屬性值運算
● 數字形態屬性值的屬性 CSS property values with number
寬width
高height
內距padding
外距margin
框border-width
placement top right bottom left
等等etc…
● CSS常用單位 CSS common units
參考資料：
w3schools
| Unit | Description |
|---|---|
| % | 百分比 percentage |
| in | 英吋 inch |
| cm | 公分 centimeter |
| mm | 公厘 millimeter |
| em | 文字單位 1em=1倍文字大小 例：line-height: 1.5em; = 1.5倍行高 text-indent: 2em; = 首行縮排2個字 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses |
| ex | 文字單位 文字1/2大小 one ex is the x-height of a font (x-height is usually about half the font-size) |
| pt | 點(1 pt = 1/72inch ) point (1 pt is the same as 1/72 inch) |
| pc | 皮卡(1pc = 12pt) pica (1 pc is the same as 12 points) |
| px | 像素 pixels (a dot on the computer screen) |
| vw | 視埠單位 相對於視窗寬度的1% viewport width |
| vh | 視埠單位 相對於視窗高度的1% viewport height |
● calc()運算式 calc() expression
參考資料：
MDN
+
加 Addition.
–
減 Subtraction.
*
乘
至少有一個參數必須是數字
Multiplication.
At least one of the arguments must be a
.
/
除
右邊必須是數字
Division.
The right-hand side must be a
.
● 範例example
width: calc(100% – 80px);
height: calc(100px – 2em);