CSS calc() 函數
CSS 函數實例
使用 calc() 函數計算 <div> 元素的寬度:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
定義與用法
calc() 函數用於動態計算長度值。
- 需要注意的是，運算符前後都需要保留一個空格，例如：
width: calc(100% - 10px)； - 任何長度值都可以使用calc()函數進行計算；
- calc()函數支持 "+", "-", "*", "/" 運算；
- calc()函數使用標準的數學運算優先順序規則；
支持版本：CSS3
流覽器支持
表格中的數字表示支持該函數的第一個流覽器版本號。
"webkit" 或 "moz" 或 "o" 指定的數字為支持該函數的第一個版本號首碼。
| 函數 | |||||
|---|---|---|---|---|---|
| calc() | 26.0 19.0 -webkit- |
9.0 | 16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
CSS 語法
calc(expression)
| 值 | 描述 |
|---|---|
| expression | 必須，一個數學運算式，結果將採用運算後的返回值。 |