calc() 本身不“动态”，仅做一次运行时计算；所谓“动态”实为变量值变化触发重算，需手动控制。常见失效原因包括父容器 box-sizing、宽度缺失、空格缺失、旧版 safari 兼容性、flex/grid 覆盖等，真正适用场景限于绝对定位偏移、剩余空间填充和 grid 轨道定义。
calc() 本身不“动态”，它只做一次运行时计算；所谓“动态宽度”，本质是靠变量值变化来触发重新计算——而变量怎么变，得你手动控制。
calc(100% - 20px) 为什么有时没反应？
常见现象：写了 width: calc(100% - 20px)，但元素宽度没按预期收缩，甚至溢出父容器。
- 检查父容器是否设置了
box-sizing: border-box—— 如果是默认的content-box，又加了padding或border，那100%指的是 content 宽度，减完 20px 后仍可能撑破盒子 - 确认父容器有明确宽度（比如
width: 100%且祖先链上没有display: inline或浮动未清除） - 注意运算符空格：
calc(100%-20px)（无空格）会直接失效，必须写成calc(100% - 20px) - 某些旧版 Safari（如 15.4 之前）对
calc()中混用rem/em和百分比敏感，字体未加载完成时1em可能取默认值，建议优先用px或vh/vw
如何让 calc() 真正“随内容数量变化”？
比如 tab 栏有 3 个还是 5 个 item，每个 item 宽度自动均分剩余空间。
- 纯 CSS 无法自动数子元素，
--tab-count必须由 JS 显式更新：el.style.setProperty('--tab-count', tabs.length) - 变量作用域要精准：定义在具体容器上（如
.tabs { --tab-count: 3; }），别塞进:root，否则多个组件互相覆盖 - 表达式写法要严谨：
width: calc((100% - 20px) / var(--tab-count))—— 外层括号不能少，否则除法优先级导致结果错误 - 如果用在 Flex 项目里，记得关掉
flex: 1或flex-grow，否则 width 被 flex 算法覆盖，calc 白写
mixing vw, %, px 时最容易翻车的三个点
混合单位看似灵活，但浏览器解析逻辑很实在，稍不注意就崩。
-
calc(100vh - 2rem)在 iOS 15–16 Safari 中可能初始渲染为 0，换成calc(100vh - 32px)更稳（2rem依赖当前 font-size，而字体加载有延迟） -
calc(100vw - var(--sidebar-width))中，若--sidebar-width是20ch，而页面字体非等宽，ch值浮动，布局就会抖 —— 这类单位只适合文本对齐，别用在主干布局 -
calc(50% + 1vw)在视口极窄时可能算出负值，虽然规范允许负长度，但某些属性（如width）会截断为 0，建议配合min-width守底
哪些地方 calc() 其实是“假生效”？
不是函数错了，是它被更高优先级的布局规则吞掉了。
- Flex 项目设了
flex: 1，再写width: calc(100% - 20px)—— 无效，主轴尺寸由 flex 决定 - Grid 子项用了
grid-column: 1 / -1，又设width: calc(100% - 16px)—— 无效，轨道已占满，宽度由 grid-template-columns 控制 - 绝对定位元素写了
left: calc(50% - 24px)却没动 —— 检查是否漏了position: absolute，或父容器没设position: relative - 想靠
calc()给 margin/padding 留间隙？不如直接用gap（Flex/Grid）或margin，更可靠
真正该交给 calc() 的任务就三类：绝对定位偏移（left/top）、剩余空间填充（min-height: calc(100vh - var(--header-h))）、以及 Grid 轨道定义（grid-template-columns: repeat(auto-fit, minmax(calc(var(--card-w) - 1rem), 1fr)))）。其他地方硬塞，大概率白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
