关键词：属性计算函数 calc

CSS 属性计算函数 calc() 是用来进行动态的尺寸计算以及数值混合运算的一种函数。它增强了纯 CSS 的灵活性，允许你在属性值的设置中直接执行基础的加（+）、减（-）、乘（*）、除（/）运算。

###使用方式

calc() 函数用于各种 CSS 属性，如 width、height、margin、padding、top、right、bottom、left、font-size 等。以下是 calc() 函数的基本语法：

property: calc(expression);

其中，expression 可以包括：

• 其他 CSS 单位值
• 数字常量
• 括号来控制运算顺序

基础示例

.element {
  width: calc(100% - 50px); // 宽度是容器宽度减50px
  padding: calc(1em + 10px); // 上下内边距是当前字体尺寸的1em加上10px
  margin: calc(10px / 2); // 外边距为5px
  font-size: calc(12px + 2vw); // 根据视窗宽度改变字体大小
}

高级用法

使用 calc() 的同时可以嵌套使用 min() 和 max() 函数，这种组合对响应式设计非常有用。

.element {
  width: calc(min(100%, 500px)); // 宽度始终是容器的100%，但不超过500px
  font-size: calc(max(12px, 1vw)); // 在某些实现中此用法可能不生效
}

括号

如果要进行优先级计算，你需要使用括号，比如在多重运算中：

.element {
  width: calc(25% + (2em * (100vw - 200px) / 2));
}

注意事项

• 在进行除法运算时，要注意除数不能为零。
• CSS 变量可以在 calc() 中使用，使得你能够进行更灵活的样式控制。
• calc() 必须确保表达式的两侧是兼容的单位，比如不能将像素（px）和百分比（%）相除。
• 我很遗憾要指出一个小误导：calc() 并不是 CSS 的原生属性，尽管它是 CSS 核心语法的一部分，它的适用性非常广泛。

兼容性

截至我的知识更新点（2023 年），calc() 得到了现代浏览器的广泛支持，包括 Chrome、Firefox、Safari、Edge 以及旧的 Internet Explorer 版本。唯一的例外是 Windows Phone 中的老版本浏览器。

实际应用场景

calc() 的一个常见用途是在响应式设计中，你可以用 calc() 来设置一个固定宽度和视口宽度的融合：

.container {
  width: calc(100% - 20px); /* 虚拟列不存在时，容器宽度为屏幕宽度减去20px */
}
.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 这部分代码创建一个栅格布局，其中每一格至少宽250px，每列最大填充至填满屏幕，如果没有空间填满则按最小宽度计算 */
}

通过 calc() 函数，开发人员可以设计出更加灵活和响应用户屏幕大小的界面布局。