calc()中加减号前后必须加空格，否则失效；乘除号左右禁止空格；用于布局时需注意box-sizing、margin叠加及间隙总数，且calc为静态计算不响应动态变化。
calc()里加减号不加空格直接失效
浏览器解析 calc() 时对语法极其敏感：加减号前后必须有空格，否则整个值被当作无效声明，退为默认值（比如 width 变成 auto）。calc(100%-20px) 看似合理，实际在所有主流浏览器中都会挂掉；正确写法只能是 calc(100% - 20px)。乘除号左右禁止空格（calc(100% / 3) ✅，calc(100% / 3) ❌），但括号内可灵活处理。
百分比减固定像素导致换行的典型场景
常见于两栏布局中主内容区宽度计算错误。例如侧边栏固定 240px，主区设 width: calc(100% - 240px)，但父容器没设 max-width 或 box-sizing: border-box，再叠加 padding 或 border，就会超宽换行。解决要点：
- 确保父容器有明确的
width或max-width（不能只靠100%传递） - 主区若带
margin-left: 20px，就得写成width: calc(100% - 240px - 20px) - 统一用
box-sizing: border-box，避免padding暗中撑大尺寸
三列等分+间隙的 calc 写法容易漏算总 margin
想让三个 .item 平分容器、每两项间留 10px 间隙，很多人直接写 width: calc((100% - 10px) / 3) —— 这会少减一个 10px。两处间隙共 20px，所以正确表达式是 calc((100% - 20px) / 3)。同时记得清除最后一个元素的右距：
`.item {
width: calc((100% - 20px) / 3);
margin-right: 10px;
}
.item:last-child {
margin-right: 0;
}`
calc 配合 vw 单位做高精度比例缩放
设计稿按 375px 宽度出图，要求某容器始终维持 16:9 比例，可用 calc(100vw / 375 * 16) 算出宽度，再用 aspect-ratio: 16 / 9 或配合 padding-top 技巧控高。注意：calc(100vw/375*16)（无空格）在 Chrome 120 之前大概率不认，必须写成 calc(100vw / 375 * 16)。这种写法对移动端适配很稳，但别用在需要动画的属性上——calc() 是静态计算，不响应滚动或 resize。
实际中最容易被忽略的，是把 calc() 当作“万能动态函数”去套高度或复杂嵌套。它只在声明那一刻计算一次，后续尺寸变化不会重算。真正需要响应式高度的地方（比如视口减去浮动 header），得搭配 vh 和显式数值，而不是指望它监听 DOM 变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
