使用 calc() 进行动态计算
使用 calc() 函数在 CSS 中混合单位并执行算术运算，从而实现动态值。
使用 calc() 进行动态计算 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是 calc()？
calc() 允许您直接在 CSS 属性值中执行算术运算。您可以在同一个计算中混合使用不同的单位（px、%、rem、vw）。
calc() 基本语法
支持加法（+）、减法（-）、乘法（*）和除法（/）。+ 和 - 运算符两侧必须有空格。
<div class="sidebar">Sidebar (100% - 240px)</div>混合使用单位
calc() 的强大之处在于可以组合原本无法混合的不兼容单位：
<div class="hero">Hero</div>
<div class="column">Column</div>将 calc() 与 CSS 变量结合使用
将 calc() 与 CSS 自定义属性结合使用，以实现动态设计令牌：
<div class="main">Main content</div>嵌套使用 calc()
可以嵌套使用 calc()，不过这种情况很少需要，因为每个上下文都会单独计算其中的数学表达式：
<div class="element">Element</div>使用 calc() 实现流式排版
使用 calc() 在两种尺寸之间创建线性插值：
<h1>Fluid Heading</h1>calc() 中的除法
除数必须是无单位的数字：
<div class="thirds">Third width</div>将 calc() 与 Grid 和 Flexbox 结合使用
在轨道定义和 flex-basis 中非常实用：
<div class="grid"><div>A</div><div>B</div></div>calc() 与其他函数的比较
使用场景：
calc()：执行任意算术运算，尤其适合混合不同单位min()/max()：从多个选项中选择较小值或较大值clamp()：将流式值限制在最小值和最大值之间
浏览器支持
所有现代浏览器以及 IE11 都支持 calc()。它是支持范围最广的 CSS 函数之一。在任何现代项目中都可以放心使用，无需回退方案。
常见的 calc() 模式
您会反复使用的实用模式：
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>快速检查
哪个 calc() 表达式可以正确计算出“父级的 30% 减去 20px”？
回顾
calc() 支持在 CSS 中使用混合单位执行算术运算。它可以实现“整个视口减去固定页眉”等动态布局，也可以进行流式排版插值。+ 和 - 运算符两侧必须有空格。将它与 CSS 变量结合使用，可以执行强大的设计令牌计算。结合使用 min、max 和 clamp，可以全面控制流式尺寸。
常见问题解答
「使用 calc() 进行动态计算」课时是免费的吗？
是的 — 「使用 calc() 进行动态计算」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「使用 calc() 进行动态计算」这节课中我会学到什么？
使用 calc() 函数在 CSS 中混合单位并执行算术运算，从而实现动态值。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「使用 calc() 进行动态计算」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。