CSS宽度计算偏差源于默认content-box盒模型，width仅指内容区，不含padding和border；解决方法是全局设置box-sizing: border-box，并在flex中用flex: 0 0 宽度避免flex-shrink压缩。
CSS元素宽度“计算不对”，通常不是代码写错了，而是浏览器按标准盒模型在算——而这个算法和你肉眼看到的“这个盒子应该多宽”不一致。关键在于：width默认只管内容区，不管padding和border。
为什么设了200px，实际占了250px？
这是最典型的盒模型表现：
- 你写了：
width: 200px; padding: 10px; border: 5px solid #000; - 浏览器按
content-box（默认）计算：200（内容） + 20（左右padding） + 10（左右border） = 250px - 结果：父容器被撑开、两列折行、百分比布局错位……都是因为它“偷偷变胖”了
浮动或inline-block元素横向放不下
比如侧边栏width: 30% + padding: 1.5em，主内容width: 70%，加起来看似100%，实际是100% + 3em —— 超出父容器，自动换行。
- 别靠试出来的“魔术数值”（如69.8%）硬凑
- 改用
calc(30% - 3em)，让浏览器实时减去内边距占用 - 更彻底的解法：统一用
box-sizing: border-box，让30%真正代表“含padding+border的总宽”
flex子元素宽度突然变小
哪怕你写了width: 164px，在flex容器里也可能被压缩成148px——因为flex-shrink: 1（默认开启）在空间不足时主动收缩。
立即学习“前端免费学习笔记（深入）”；
- 想固定宽度，必须显式关闭收缩：
flex-shrink: 0 - 或者用简写：
flex: 0 0 164px（不放大、不缩小、基准宽164px） - 注意：仅设
width在flex里常被flex-basis覆盖，优先级更低
怎么一劳永逸避免这类问题？
全局加这一段，能解决八成宽度错位：
*, *::before, *::after { box-sizing: border-box; }- 所有元素的
width从此包含内容、内边距和边框 - 表单控件、图片等个别需要
content-box的，单独重置即可 - 配合
flex或grid使用，布局预期性大幅提升
