calc

摘要

calc() 函数可以在 CSS 属性需要长度值的地方使用。calc() 允许使用数学表达式，包括加法（‘+’）、减法（‘-’）、乘法（‘*’）和除法（‘/’）作为组件值。这些值本身可以是百分比、整数、数字、长度单位（如 em 或 cm）、角度甚至时间值（秒、毫秒）的混合。Calc 对于计算开发时未知的某些值或设置公式化的值而不是任意值非常有用。

示例

这是一个如何在 CSS 中使用 calc 的示例

/* CSS calc function example */

.header {
     position:relative;
     margin: 0px auto;
     width: 80%; /* fallback for browsers without support for calc() */
     width: calc(100% - 100px); /* CSS3 compliant implementation; Firefox 16 and IE 9, and above */
     border: solid black 1px;
     box-shadow: 5px 5px #999;
     margin-top: 40px;
     padding: 10px;
     text-align: center;
}

.header:hover {
     width: calc(100% / 3 - 2 * 1em); /* complex calculation on hover */
     width: 25%; /* fallback */
}

查看实时示例

备注

如果除以零，将会导致 HTML 解析器出错。此外，计算出的返回值必须符合相关 CSS 目标的范围。例如，宽度或高度不能为负数，因此将会恢复为 0；

相关规范

W3C CSS 值和单位模块 Level 3：数学表达式：“calc”

候选推荐