CSS calc() 函数

定义和用法

CSS 的 calc() 函数执行计算，并将结果用作属性值。

实例

使用 calc() 计算 <div> 元素的宽度：

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

亲自试一试

CSS 语法

calc(expression)
值 描述
expression

必需。一个数学表达式，其结果将用作值。

可以使用以下运算符：+、-、*、/。

技术细节

版本： CSS3

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
26 9 16 7 15

相关页面

参考：CSS acos() 函数

参考：CSS asin() 函数

参考：CSS atan() 函数

参考：CSS atan2() 函数

参考：CSS cos() 函数

参考：CSS exp() 函数

参考：CSS hypot() 函数

参考：CSS log() 函数

参考：CSS mod() 函数

参考：CSS pow() 函数

参考：CSS sin() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数