calc()函数怎么使用

calc() 是 CSS 中的一个非常有用的函数，它允许你在 CSS 属性值中执行计算。这意味着你可以使用 calc() 来动态计算宽度、高度、边距、填充等属性的值。calc() 函数支持基本的数学运算，包括加 (+)、减 (-)、乘 (*) 和除 (/)。

使用 calc() 的基本语法：

element {
  property: calc(expression);
}

示例

1. 基础示例：将元素的宽度设置为父容器宽度的50%减去20像素。

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

2. 结合不同单位：calc() 可以在同一个表达式中结合使用不同的单位。

div {
  margin-top: calc(100vh - 50%);
}

这将设置 div 的上边距为视口高度 (vh) 减去其高度的50%。

3. 嵌套 calc()：calc() 函数可以嵌套使用。

div {
  padding: calc(2em + calc(3px - 1px));
}

4. 使用自定义属性：calc() 可以与 CSS 自定义属性（变量）一起使用，提供更灵活的设计。

:root {
  --base-margin: 10px;
}

div {
  margin: calc(var(--base-margin) * 2);
}

注意事项

• 在使用 calc() 时，运算符号前后需要加上空格。例如，calc(100% -10px) 是无效的，应该写成 calc(100% - 10px)。
• calc() 可以进行动态计算，这意味着它可以在浏览器窗口大小变化时更新值。
• 由于 calc() 是在 CSS 解析时计算的，它不能用于所有 CSS 属性。大多数与尺寸、边距、填充和位置相关的属性都支持 calc()。
• 几乎所有现代浏览器都支持 calc()，但在使用较新的 CSS 特性时，仍然建议检查浏览器兼容性。
  calc() 的灵活性使其成为响应式设计和复杂布局中的强大工具。正确使用时，它可以简化 CSS 代码，并提供更多的样式控制能力。