# `calc()` 函数

URL: https://caijiao.org/css/11-advanced/02-calc
Source: docs/css/11-advanced/02-calc.md
Description: calc() 是 CSS 中的一个计算函数，可用于动态计算长度、间距等值，增强布局的灵活性。

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

## 1. 基本语法

```css
width: calc(100% - 40px);
```

可用运算符包括：

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

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

## 2. 常见用途

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

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

### 示例 2：垂直居中元素

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

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

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

## `calc()` 函数示例

[在线代码演示](/css/demos/32.html)