calc()函数可混合单位动态计算宽高，配合box-sizing: border-box更易控制尺寸。1. 默认content-box下width仅含内容，加padding/border会增加总尺寸；2. 推荐border-box使width包含content+padding+border；3. 常见用法如width: calc(100% - 40px)实现减去边距的布局；4. 示例中sidebar宽度为父容器减200px，适用于侧边栏布局；5. height也可用calc()，如height: calc(100vh - 60px)实现头部固定后内容填满视口；6. 注意运算符前后需空格，避免calc(100%-20px)类错误；7. 不支持非数值单位参与计算如calc(100% / red)。正确使用可精准实现响应式布局。
在CSS中，calc() 函数可以动态计算长度值，非常适合结合盒模型来设置元素的宽高。它允许你在表达式中混合使用不同单位（如百分比、像素、em等），帮助更灵活地控制布局。
理解盒模型对宽高的影响
在使用 calc() 前，先明确盒模型的组成：
- 内容区域（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
默认情况下，box-sizing: content-box，此时设置的 width/height 只包括内容区域。如果你添加 padding 或 border，会额外增加元素总尺寸。
推荐使用：
box-sizing: border-box;
这样 width 包括 content + padding + border，更容易用 calc() 控制整体尺寸。
用 calc() 动态计算宽度
常见场景：一个元素占据父容器的全部宽度，但需要减去左右边距或内边距。
立即学习“前端免费学习笔记（深入）”；
width: calc(100% - 40px);这表示宽度为父元素的100%，再减去40px（比如两侧各20px的 margin 或 padding）。
示例：
<font style="background:#f4f4f4;padding:6px;display:block;margin:8px 0">
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
<p>.sidebar {
width: calc(100% - 200px);
float: left;
}
</font>sidebar 宽度 = 父容器宽度 - 200px，常用于侧边栏+主内容区布局。
计算高度时的注意事项
calc() 同样适用于 height，但需注意父元素是否有明确高度。
例如，实现一个固定头部 + 可滚动内容区：
<font style="background:#f4f4f4;padding:6px;display:block;margin:8px 0">
.header {
height: 60px;
}
<p>.content {
height: calc(100vh - 60px);
overflow-y: auto;
}
</font>这里使用 100vh 表示视口高度，减去 header 的 60px，让内容区刚好填满剩余空间。
避免常见错误
- 运算符前后必须有空格，如 calc(100% - 20px) ✅，而 calc(100%-20px) ❌（某些浏览器可能不识别）
- 不能用 calc() 计算 margin/padding 自身占比以外的复杂依赖
- 确保单位合法，如不能
calc(100% / red)
基本上就这些。只要理解了 box-sizing 和 calc() 的配合逻辑，就能轻松实现响应式且精准的尺寸控制。
