calc() 函数

calc() 是 CSS 中的计算工具函数，允许将不同单位的值进行加减乘除操作，常用于布局中动态尺寸的设定。

1. 基本语法

width: calc(100% - 40px);

可用运算符包括：

• + 加
• - 减
• * 乘
• / 除（仅限数字，不能除单位）

注意：运算符两侧必须留空格，如 calc(100% - 10px)。

2. 常见用途

示例 1：固定间距减去动态宽度

.sidebar {
  width: calc(100% - 200px); /* 减去主内容宽度 */
}

示例 2：垂直居中元素

.box {
  position: absolute;
  top: calc(50% - 50px); /* 元素高度为 100px */
}

示例 3：输入框和按钮组合

.input {
  width: calc(100% - 100px); /* 按钮宽度为 100px */
  float: left;
}

calc() 函数示例

loading