calc css

作者：轻狂书生发布日期:2026-01-16 浏览:27

/* 使用 calc() 函数进行 CSS 计算 */

/* 示例 1: 设置元素宽度为视口宽度减去 20px */
.container {
  width: calc(100vw - 20px);
}

/* 示例 2: 设置内边距为元素高度的 10% 加上 15px */
.box {
  padding: calc(10% + 15px);
}

/* 示例 3: 设置字体大小为视口高度的 2% 或 16px 中的较大值 */
.text {
  font-size: calc(2vh + 16px);
}

/* 解释说明:
- calc() 函数允许我们在 CSS 中执行简单的数学计算。
- 支持加 (+)、减 (-)、乘 (*) 和除 (/) 操作。
- 可以混合使用不同的单位（如 px、em、vh、vw 等）。
- 需要注意的是，calc() 内部的表达式必须用空格分隔操作符。例如，写成 calc(50% -10px) 是无效的，应该写成 calc(50% - 10px)。
*/

上一篇：jquery css

下一篇：七种基本的css选择器