calc() 是 CSS 中的一个功能，允许你在属性值中进行基础的数学计算。这是非常有用的，特别是当你需要在不同的上下文或视口大小中动态调整尺寸或位置时。

以下是一些 calc() 函数的简单实用示例：

  1. 动态宽度：

假设你希望一个元素的宽度为其父元素宽度的 75%，但还要减去 20px 的边距。你可以这样写：

.element {
    width: calc(75% - 20px);
}
  • 1.
  • 2.
  • 3.
  1. 动态字体大小：

如果你希望一个元素的字体大小基于视口宽度（vw）动态变化，但又不想让它变得太大或太小，你可以这样设置：

h1 {
    font-size: calc(1rem + 2vw); /* 字体大小将随着视口宽度的增加而增加 */
}
  • 1.
  • 2.
  • 3.
  1. 居中元素：

假设你有一个绝对定位的元素，你希望它水平居中。你可以使用 calc() 与 transform 结合来实现这一点：

.centered-element {
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% + 0.5px)); /* 0.5px 是为了修复某些浏览器的渲染问题 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  1. 动态边距：

你可以使用 calc() 来动态地设置元素的边距，使其基于某个基准值（如百分比或视口单位）进行增减：

.box {
    margin-top: calc(10% + 20px); /* 边距将是父元素高度的 10% 加上 20px */
}
  • 1.
  • 2.
  • 3.
  1. 响应式布局中的列宽：

在响应式布局中，你可能希望列宽能够动态调整以适应不同的屏幕尺寸。calc() 可以帮助你实现这一点：

.column {
    float: left;
    width: calc(50% - 10px); /* 列宽将是容器宽度的 50%，但会减去 10px 的间距 */
    margin-right: 10px; /* 列之间的间距 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

注意：在使用 calc() 时，请确保运算符（如 +、-、*、/）前后都有空格，以确保跨浏览器的兼容性。另外，不是所有的 CSS 属性都支持 calc()，所以请在使用前检查其兼容性。