99%的“内容区+侧栏总宽超限”问题源于未统一使用box-sizing:border-box，且未处理伪元素、父容器padding及定位脱离文档流；默认content-box下width不包含padding/border，导致实际宽度超标。
直接说结论：99% 的“内容区 + 侧栏总宽超限”问题，根源不是写错了 width，而是没统一用 box-sizing: border-box，且没处理好伪元素、父容器 padding 和定位脱离文档流这三类干扰。
为什么 width: 250px + padding: 16px 实际占了 282px？
浏览器默认用 content-box 模型：width 只管内容区，padding 和 border 是额外加在两边的。比如你设了 width: 250px; padding: 16px; border: 1px，实际总宽就是 250 + 32 + 2 = 284px —— 父容器若刚好宽 280px，必然溢出或换行。
- 只给侧栏加
box-sizing: border-box不够，必须确保父容器（如.sidebarLayout）也受控 - 漏掉
*::before, *::after会导致清除浮动的伪元素仍按content-box计算，悄悄撑破容器 - 全局重置要写全：
* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }，且必须放在所有 CSS 最顶部
position: fixed 侧栏让主内容区 margin-left 失效怎么办？
position: fixed 元素完全脱离文档流，margin-left: 250px 对它无效 —— 主内容不会“感知”侧栏存在，结果就是被遮盖或堆叠。
- 别依赖
margin-left避让，改用padding-left: 250px+box-sizing: border-box（主内容需设width: 100%） - 更稳妥的方案是放弃
fixed，改用position: sticky或 Flex 布局，让侧栏始终参与尺寸计算 - 如果必须用
fixed，还要同步检查父容器是否设了overflow: hidden，它会裁剪固定元素导致视觉“变窄”
Flex 布局下侧栏宽度不生效的三个关键点
即使写了 width: 250px，在 Flex 容器里也可能被忽略，因为 Flex 优先看 flex-basis。
- 必须显式写
flex: 0 0 250px（禁止伸缩 + 禁止收缩 + 基础尺寸），光靠width不起作用 - 侧栏内若有
input、textarea等替换元素，得额外加min-width: 0，否则它们会抗拒收缩，把整行撑开 - 父容器没设
display: flex或用了flex-wrap: wrap，也会导致子项宽度计算逻辑切换
真正难处理的，是那些混用 fixed + flex + 第三方组件库的场景 —— Ant Design 或 Element Plus 往往会重置 box-sizing，而 Shadow DOM 或 CSS-in-JS 会让全局重置失效。这时候得在对应作用域里单独补一条 box-sizing: border-box，不能指望一次声明管全场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
