CSS宽度计算偏差源于默认content-box盒模型，width仅指内容区，不含padding和border；解决方法是全局设置box-sizing: border-box，并在flex中用flex: 0 0 宽度避免flex-shrink压缩。
CSS元素宽度“计算不对”，通常不是代码写错了，而是浏览器按标准盒模型在算——而这个算法和你肉眼看到的“这个盒子应该多宽”不一致。关键在于：width默认只管内容区，不管padding和border。
这是最典型的盒模型表现：
width: 200px; padding: 10px; border: 5px solid #000;
content-box（默认）计算：200（内容） + 20（左右padding） + 10（左右border） = 250px
比如侧边栏width: 30% + padding: 1.5em，主内容width: 70%，加起来看似100%，实际是100% + 3em —— 超出父容器，自动换行。
calc(30% - 3em)，让浏览器实时减去内边距占用box-sizing: border-box，让30%真正代表“含padding+border的总宽”哪怕你写了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使用，布局预期性大幅提升以上就是css元素宽度计算不对怎么回事_理解标准盒模型与width计算规则的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
327
收藏
取消收藏
