calc()

calc() 最强大的特性是支持不同的单位混合运算，包括绝对单位（px、cm、rem、em等）和相对单位（%、vw、vh等），这是静态数值无法实现的。

容性极佳，支持 IE9+、Chrome、Firefox、Safari 等所有现代浏览器，无需额外兼容处理。

运算规则

• 加法（+）：必须在运算符两侧保留空格（如 10px + 20%，不可写 10px+20%）
• 减法（-）：必须在运算符两侧保留空格（如 100% - 30px，不可写 100%-30px）
• 乘法（*）：无需强制空格，但至少有一个操作数是无单位的纯数字（如 20px * 2 合法，20px * 30px 非法）
• 除法（/）：无需强制空格，但第二个操作数必须是无单位的纯数字（如 100px / 2 合法，100px / 20px、100px / 50% 均非法）

示例

示例1：动态设置元素宽度（自适应留白）

场景：让容器占满父元素宽度，同时左右各保留20px的留白（无需手动计算父元素宽度）

/* 父元素 */
.parent {
  width: 500px;
  height: 200px;
  border: 1px solid #333;
}

/* 子元素：使用calc()计算宽度 */
.child {
  width: calc(100% - 40px); /* 100%（父元素宽度） - 左右各20px（总计40px） */
  height: 100px;
  margin: 0 auto; /* 水平居中 */
  background-color: skyblue;
}

示例2：动态设置字体大小（响应式文字）

场景：字体大小基于视口宽度，同时保留基础大小，实现响应式文字

.text {
  /* 基础16px + 视口宽度的1%，实现屏幕越大文字越大 */
  font-size: calc(16px + 1vw);
}

示例3：动态定位元素（精准偏移）

场景：让元素相对于父元素右侧偏移30px，顶部偏移20px

.parent {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #333;
}

.box {
  position: absolute;
  /* 右侧偏移：100%（父元素宽度） - 自身宽度50px - 额外偏移30px */
  left: calc(100% - 50px - 30px);
  top: 20px;
  width: 50px;
  height: 50px;
  background-color: coral;
}

示例4：calc() 嵌套使用

calc() 支持嵌套调用（内层calc()可省略关键字，直接写表达式，建议保留以提高可读性）

/* 嵌套用法：计算宽度 = 父元素80% - （20px + 1rem）* 2 */
.nested-box {
  /* 完整嵌套写法 */
  width: calc(80% - calc(20px + 1rem) * 2);
  /* 简化写法（内层calc()省略） */
  /* width: calc(80% - (20px + 1rem) * 2); */
  height: 80px;
  background-color: purple;
  color: #fff;
}