<p>calc() 是 CSS 函数，仅用于 CSS 属性值，HTML 中不可直接调用；其语法要求严格：+ - 两侧必须空格，* / 两侧禁止空格；常用于两栏布局中主区宽度计算，如 calc(100% - 240px)，需确保父容器有明确宽度且避免单位混用导致像素坍塌。</p>
calc() 本身不是 HTML 功能，它只能写在 CSS 属性值里，HTML 标签中不能直接调用。你要的“HTML 实现两栏自适应”，实际是靠 HTML 结构 + CSS 中的 calc() 配合完成，核心在于宽度计算要准、单位混用要合规、浏览器解析不翻车。
calc() 里加减号两侧必须空格，否则整个值失效
浏览器把 calc(100%-20px) 当作非法值，不是逻辑错，是语法崩了。CSS 解析器严格要求 + 和 - 两边必须有空格，* 和 / 左右则禁止空格（括号内除外）。
-
calc(100% - 20px)✅ 安全，所有现代浏览器识别 -
calc(100% -20px)❌ 多数场景退为auto或初始值，右侧栏直接换行 -
calc(100vw / 375 * 16)✅ 可用于按设计稿比例算宽度（如 375px 宽屏下 16:9 容器） -
calc(100vw/375*16)❌ Chrome 120+ 才开始松动容忍，别赌兼容性
两栏布局中 calc() 最稳的用法：固定侧边栏 + 主区动态缩放
别用 calc() 算高度或响应滚动，它只做声明时的一次静态运算。真正靠谱的场景是宽度微调——尤其当你有固定宽的导航栏、工具栏时。
- 左侧固定 240px：
.sidebar { width: 240px; float: left; } - 右侧主区用
calc(100% - 240px)，但必须确保父容器有明确width或max-width - 若右侧还带
margin-left: 20px，就得写成width: calc(100% - 240px - 20px)，否则总宽超限导致换行 - 搭配
display: flex更省心：grid-template-columns: 240px calc(100% - 240px)或flex: 0 0 calc(100% - 240px)
calc() 与 vw/vh 混用时的像素坍塌风险
用 calc(100vw / 375 * 16) 算容器宽度没问题，但拿它算 font-size 或 padding 就容易翻车：小屏下 100vw 可能小于 375px，导致结果
立即学习“前端免费学习笔记（深入）”；
- 文字消失？大概率是
font-size: calc(100vw / 375 * 14)在 iPhone SE 上算出 0.92px → 渲染为 0px - 安全写法加兜底：
font-size: max(14px, calc(100vw / 375 * 14))（注意 IE 不支持max()） - 更稳方案：JS 控制
document.documentElement.style.fontSize，CSS 只用rem，避开 CSS 层跨数量级换算
calc() 不能替代 padding-top 做宽高比自适应
有人写 height: calc(100vw * 9 / 16) 强制维持 16:9，这会抖、会错、不可靠。视口单位在地址栏显隐、缩放、横竖屏切换时跳变，且 height 无法基于自身宽度计算（width 是未知量）。
- 真正稳定的做法仍是
padding-bottom: 56.25%+position: absolute子元素撑满 -
calc()只适合辅助算padding-bottom值，比如：padding-bottom: calc(100% / (16 / 9))—— 注意16 / 9中的空格不能少 - CSS 变量不能直接参与
calc()运算（--ratio: 16/9写进去无效），要用 JS 注入内联style或改用attr()（目前仅限content属性）
真正卡住人的从来不是怎么写 calc()，而是忘了它只是个“编译期计算器”：不监听 DOM 变化、不响应滚动缩放、不推导比例关系。该用 flex 或 grid 的地方硬套 calc()，后期改一个间距就得重算三处宽度。
