CSS中的calc()有什么作用？

calc() 是 CSS 中的一个函数，它允许你执行基础的数学计算来设置 CSS 属性值。这在动态布局和响应式设计中特别有用，因为它允许你根据其他 CSS 属性的值或视口（viewport）的宽度等动态地调整元素的大小、位置等。

例如，假设你希望一个元素的宽度为其父元素宽度的 50%，但再减去 20px。你可以使用 calc() 来实现这一点：

.element {
  width: calc(50% - 20px);
}

在这个例子中，.element 的宽度将被设置为其父元素宽度的 50% 减去 20px。

需要注意的是，calc() 函数中的运算符两侧必须有空格，否则它可能无法正常工作。例如，calc(50%-20px) 是无效的，应该是 calc(50% - 20px)。

此外，calc() 可以用于任何接受长度或百分比值的 CSS 属性，如 height、margin、padding、font-size 等。这使得 calc() 在响应式设计和复杂布局中非常有用，因为它允许你根据视口大小、其他元素的大小或位置等因素动态地调整元素的大小和位置。