在CSS中，`calc()` 函数是一个非常强大的工具，它允许开发者执行一些基本的算术计算，以计算样式属性的值。`calc()` 的全称是“calculate”，意味着“计算”，它的主要作用是在CSS中允许我们进行动态计算。
`calc()` 函数可以应用于任何需要数值的CSS属性中，例如长度（`width`、`height`）、间距（`margin`、`padding`）和位置（`top`、`left`）等。它支持加（`+`）、减（`-`）、乘（`*`）和除（`/`）四则运算，并且可以使用百分比、em、rem、px等长度单位。
使用`calc()`的优势
1. 灵活性：不再局限于固定的尺寸或百分比，可以在响应式设计中灵活调整元素大小。
2. 响应式设计：对于需要根据父容器或兄弟元素动态计算大小的场景，`calc()` 非常有用。
3. 维护性：通过CSS直接计算，减少了对JavaScript的依赖，简化了代码维护。
`calc()`的基本语法
property: calc(expression);
这里的`expression`就是计算表达式，可以是简单的数值运算，也可以是包含长度单位的复杂表达式。
示例
以下是一些使用`calc()`的示例：
1. 设置元素的宽度，减去两边边距：
.width-with-margin {
width: calc(100% - 20px);
}
2. 使一个元素的高度是其宽度的50%加上10px：
.aspect-ratio {
width: 200px;
height: calc(200px * 0.5 + 10px);
}
3. 响应式的侧边栏，其宽度是父容器宽度减去一个固定值：
.sidebar {
width: calc(100% - 250px);
}
注意事项
- `calc()` 函数内表达式两边的空格：虽然通常在CSS中多余的空格会被忽略，但在`calc()`内部，表达式两边的空格是必须的（例如`calc(100% – 20px)`而不是`calc(100%-20px)`）。
- 浏览器支持：大多数现代浏览器都支持`calc()`，但仍然需要考虑一些老旧浏览器的兼容性问题。
`calc()` 函数的引入，极大地提升了CSS的灵活性和动态处理能力，使前端开发者能够以更简洁、高效的方式处理页面布局和元素尺寸问题。