百分比宽度计算出错的根本原因是未明确其参照对象——width: 50%始终相对于父元素内容区宽度（content box）计算，而该值受box-sizing、padding、border、定位方式及布局上下文共同干扰；父容器若无明确内容宽度（如width: auto且无约束），将导致循环依赖或计算失效。
百分比宽度计算出错，根本不是 CSS 写错了，而是你没搞清它“相对于谁”算——width: 50% 永远按父元素的 内容区宽度（content box） 计算，而这个值受 box-sizing、padding、border、定位方式、布局上下文共同干扰。
父容器没有明确的内容区宽度
这是最常被忽略的前提。百分比宽依赖父元素的“包含块（containing block）内容宽度”，如果父元素是 width: auto 且没被约束（比如没设 max-width、不在 flex/grid 容器里、也没绝对定位），它的内容宽度可能由子元素反向撑开，形成循环依赖。
- 典型现象：两个
width: 50%的子元素并排却换行，或父容器宽度忽大忽小 - 检查方法：在 DevTools 的 “Computed” 面板看父元素的
width值是否为具体像素（如320px），而不是auto - 修复方式：
- 给父容器显式设
width或max-width - 让它处于有尺寸约束的上下文中：比如
display: flex的容器、position: absolute并设置了left/right、或 grid track 明确用fr/px定义
box-sizing 混用导致实际占位失控
box-sizing: content-box（默认）下，width: 100%只管内容区；加上padding和border后，总宽必然超限。哪怕你写了width: 100%，只要子元素自身带padding: 16px，它就一定溢出。- 常见翻车点：
- 全局只写了
* { box-sizing: border-box; }，但漏了::before/::after—— 它们不继承，清浮动或图标类伪元素仍按content-box算 - 第三方组件（如 Ant Design 的
Input）内部样式隔离，外部重置无效 - Safari 旧版对表单控件的
box-sizing支持不稳定，需加-webkit-box-sizing
- 全局只写了
- 正确写法必须是：
* , *::before, *::after { box-sizing: border-box; }，且放在所有 CSS 最顶部 - 替换元素（
img、video）默认仍是content-box，务必单独重置：img, video { box-sizing: border-box; display: block; }
定位与布局模式改变包含块定义
百分比宽的参照对象会因布局模式突变：
position: absolute元素的包含块是最近的position: relative/absolute/fixed祖先的 padding box（不是 content box），而普通流中是 content box —— 这个差异极易引发错位。立即学习“前端免费学习笔记（深入）”；
- 浮动元素：包含块仍是块级祖先的 content box，但父容器若塌陷（height: 0），子元素的百分比就按 0 计算
- Flex 项目：虽然布局靠
flex-basis，但width: 50%依然按父 content width 解析；若混用width和flex属性，优先级冲突会导致行为不可预测 - Grid 项：百分比宽基于对应轨道大小，但如果轨道本身是
1fr或auto，百分比会退化为无效值 - 修复关键：不要让百分比宽和浮动/绝对定位混用；改用
flex或grid时，用flex-basis/grid-column替代width
父容器 padding/border 挤占子元素可用空间
父容器的
padding不影响子元素百分比计算（子元素仍按父 content width 算），但它会直接压缩子元素的可用区域。比如父容器padding: 20px，子元素width: 100%实际只能铺满中间那块 100% − 40px 的区域，视觉上就像“窄了一圈”。- 典型场景：圣杯布局中间栏被侧边栏挤窄、卡片内图片+文字总宽超容器
- 解决思路不是调小子元素
width，而是：- 把 padding 移到子元素上（让子元素自己处理内边距）
- 或改用
gap（flex/grid）替代父容器 padding - 若必须保留父 padding，子元素用
calc(100% - 40px)手动补偿（仅限固定值）
- 注意：
border同理，但更隐蔽——它不占 layout space 却影响视觉边界，DevTools 的盒模型图示里才能看清
真正麻烦的从来不是百分比本身，而是你没意识到：父容器的 padding 是“看不见的墙”，伪元素是“隐身的占位者”，而
box-sizing不是可选配置，是尺寸计算的底层开关——漏掉任意一环，width: 50%就只是个幻觉。 - 给父容器显式设
