三栏布局不能写死宽度因屏幕尺寸差异导致溢出或浪费；calc()可使两侧固定、中间自适应，但需注意单位空格规则、避免浮动干扰，并在移动端加min-width:0防失效。
三栏布局为什么不能直接写死宽度
因为屏幕尺寸千差万别，固定 px 宽度在小屏上会溢出，在大屏上又浪费空间。用 calc() 的核心价值不是“炫技”，而是让左右侧边栏保持固定宽度（比如 240px），中间内容区自动填满剩余空间，且不依赖 JavaScript 或媒体查询。
calc() 里必须注意的单位混用规则
常见错误是写成 width: calc(100% - 240px - 240px) 却忘了加空格——calc(100%-240px-240px) 会直接失效，浏览器报 invalid property value。CSS 中 +、- 两侧必须有空格，* 和 / 两侧也建议加空格（虽然部分浏览器容忍不加）。
- ✅ 正确：
width: calc(100% - 240px - 240px) - ❌ 错误：
width: calc(100%-240px-240px) - ⚠️ 注意：
calc(100% / 3)合法，但calc(100% * 0.33)不合法（不允许小数乘百分比）
HTML 结构要避免浮动或绝对定位干扰 calc 计算
calc() 只负责算尺寸，不解决布局流问题。如果用 float 或 position: absolute，中间栏即使宽度算对了，也可能被遮挡或错位。推荐用 display: flex 或纯 CSS Grid 配合 calc()，否则容易白忙一场。
最简可行结构示例：
<div class="layout"> <aside class="sidebar-left"></aside><main class="content"></main><aside class="sidebar-right"></aside> </div>
对应 CSS：
.layout { display: flex; }
.sidebar-left { width: 240px; }
.sidebar-right { width: 240px; }
.content { width: calc(100% - 480px); }
移动端下 calc() 宽度可能被 viewport 缩放破坏
某些安卓 WebView 或老版 iOS Safari 在缩放页面时，calc(100% - 480px) 里的 100% 会按视觉视口计算，导致中间栏变窄甚至换行。解决方案不是去掉 calc()，而是加一行 min-width: 0 到中间栏：
.content {
width: calc(100% - 480px);
min-width: 0; /* 关键：防止 flex item 内容撑开 */
}
这个 min-width: 0 很容易被忽略，但它决定了 calc() 算出来的宽度能否真正生效——尤其当内容里有长单词或未折行的 URL 时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
