calc()需显式减去父容器padding和子元素border/margin，如width: calc(100% - 240px - 32px)；必须用box-sizing: border-box统一盒模型，括号与空格不可省略，且优先选用flex/grid替代静态计算。
calc() 里怎么处理 padding 和 margin 导致的宽度偏差
直接写 width: calc(100% - 20px) 很容易漏掉父容器的 padding 或子元素自身的 border，结果发现宽度还是溢出或收缩异常。这是因为 calc() 只做数值运算，不自动感知盒模型结构。
关键点在于：如果你的父容器设了 padding: 0 16px，那它的可用内容宽度其实是 100% - 32px；若再减去子元素的固定边距（比如 margin: 0 10px），就得手动补上这 20px。
- 优先给父容器加
box-sizing: border-box，确保width包含padding和border - 如果父容器有
padding，子元素的calc()必须显式减去它：例如width: calc(100% - 240px - 32px) - 子元素自身若有
border或padding，且你希望“视觉宽度”等于计算值，就额外加box-sizing: border-box
多列等宽 + 间距的 calc 写法（比如三栏布局）
常见错误是用 width: 33.333% 然后靠 margin 隔开，结果最后一列换行——因为百分比累加误差 + margin 占据额外空间。用 calc() 能真正均分「扣除间距后的总宽」。
假设三列，每列间有 15px 水平间距（即两处 gap，共 30px），则每列宽度应为：(100% - 30px) / 3。
- 写法必须带空格：
width: calc((100% - 30px) / 3)，不能写成calc((100%-30px)/3) - 括号不能省：除法优先级高，
100% - 30px / 3会被解析成100% - 10px，不是你想要的 - 注意兼容性：IE9–11 不支持乘除，所以
/ 3在旧 IE 会失效；如需兼容，改用flex或 JS fallback
为什么 calc(100% - 20px) 有时不生效
不是语法错，而是计算上下文缺失。最典型的是父元素没明确宽度，或者自己是 display: inline 元素。
- 父容器是
display: inline或未设width/max-width，100%就无法解析为具体像素值 - 元素是
position: absolute但没设left/right，此时width: 100%默认按内容宽度，calc()失去参照 - 在 Flex 容器中，
100%指的是主轴剩余空间，行为更稳定；但若该 flex item 设了flex: 0 0 auto，它可能拒绝收缩，calc()就被忽略
和 flex/grid 比，calc 做间距宽度有什么硬伤
calc() 是静态计算，不响应布局变化；而 flex 和 grid 是动态布局引擎，能自动重排、折行、对齐。
- 用
calc()实现三栏，一旦屏幕窄到某列文字撑开，整行就容易溢出；flex-wrap则可自动折行 -
gap属性在 flex/grid 中原生支持间距，语义清晰、无单位混用风险，且能响应justify-content对齐方式 -
calc()表达式越复杂（比如嵌套、多层括号），低端 Android WebView 或旧 Safari 解析越慢，甚至卡顿
真正需要 calc() 的场景其实很窄：比如必须兼容不支持 flex 的老环境，或要混合 vw 与 rem 做字体微调——其他时候，优先让 layout 引擎干活，别硬算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
