CSS3 calc() 函数使用指南

calc() 是 CSS3 中一个非常实用的函数，它允许你在声明 CSS 属性值时执行计算。下面详细介绍它的使用方法：

基本语法

property: calc(expression);

其中 expression 是一个数学表达式，可以包含以下运算符： - + 加法 - - 减法 - * 乘法 - / 除法

使用规则

1. 运算符前后必须有空格（除了乘法和除法）

   • 正确：calc(100% - 20px)
   • 错误：calc(100%-20px)

2. 可以混合使用不同的单位

   width: calc(100% - 50px);
   height: calc(100vh - 2em);
   

3. 可以嵌套使用

   width: calc(100% / calc(10px + 10px));
   

实际应用示例

1. 响应式布局

.container {
  width: calc(100% - 40px); /* 左右各留20px边距 */
  margin: 0 auto;
}

2. 网格布局

.grid-item {
  width: calc((100% - 30px) / 3); /* 3列布局，间距10px */
  margin-right: 10px;
}
.grid-item:last-child {
  margin-right: 0;
}

3. 固定头部布局

.content {
  height: calc(100vh - 60px); /* 总高度减去头部高度 */
  overflow: auto;
}

4. 复杂计算

.element {
  font-size: calc(1rem + 1vw);
  padding: calc(2em + 5px);
}

浏览器兼容性

calc() 函数在现代浏览器中有很好的支持（IE9+、Firefox、Chrome、Safari、Edge）。对于旧版浏览器，建议提供回退方案：

.element {
  width: 90%; /* 回退值 */
  width: calc(100% - 10%);
}

注意事项

1. 乘法和除法中至少有一个值必须是无单位的数字

   • 正确：calc(100px * 2), calc(100px / 2)
   • 错误：calc(100px * 2px)

2. 除法运算时，除数不能为0

3. 在媒体查询中不能使用 calc()

calc() 函数极大地增强了CSS的灵活性，特别是在响应式设计中，能够实现更精确的布局控制。