百分比宽度的计算基准是父容器的内容区宽度（content box），受box-sizing、内边距、边框、浮动、定位及布局上下文共同影响；需确保父元素有明确可计算的宽度，且注意不同定位和布局模式下包含块定义的差异。
百分比宽度不准确，通常不是 CSS 写错了，而是没理解它“相对于谁”计算——关键在父容器的 内容区宽度（content box），且受盒模型（box-sizing）、内边距、边框、浮动、定位等多重影响。
父容器必须有明确的宽度
百分比宽度（如 width: 80%）是相对于**包含块（containing block）的内容宽度**计算的。如果父元素没有设定宽度（比如默认 width: auto），又没被其他规则约束（如 flex 项目、绝对定位上下文），那它的内容宽度可能由子元素撑开，形成循环依赖，导致百分比失效或表现异常。
- 确保父元素有可计算的宽度：显式设置
width、max-width，或让它处于有明确尺寸的上下文中（如display: flex的 flex 容器、position: absolute且设置了left/right） - 避免让父元素仅靠子元素“撑开”，尤其当子元素本身用百分比宽时
注意 box-sizing 对“内容区”的定义
默认 box-sizing: content-box 时，width: 50% 指的是“内容区占父内容区的 50%”，但若加了 padding 或 border，总占用空间会超出预期；而 box-sizing: border-box 下，百分比宽度包含 padding 和 border，更符合视觉直觉，但依然以父元素的 内容区宽度 为基准（不是 padding-box 或 border-box）。
- 统一使用
box-sizing: border-box可减少意外溢出，但不会改变百分比的参照对象 - 父元素若有 padding，不影响子元素百分比计算（子元素仍按父 content width 算），但会压缩子元素可用空间
内边距和边框会挤占实际显示区域
即使子元素设了 width: 100%，只要它自身有 padding 或 border（且 box-sizing: content-box），就会撑出父容器，造成横向滚动或错位。
立即学习“前端免费学习笔记（深入）”；
- 方案一：改用
box-sizing: border-box，让 padding/border 包含在 width 内 - 方案二：用
calc(100% - 左右 padding - 左右 border)手动修正（适合固定值场景） - 方案三：把 padding/border 移到父元素上，子元素专注内容布局
浮动、定位与弹性布局的影响
浮动元素的包含块仍是最近的块级祖先的内容区；绝对定位元素的包含块则取决于最近的 position: relative/absolute/fixed 祖先——此时百分比宽是相对于该祖先的 padding box（注意：这是特例！），而非 content box。
- Flex 项目中，
width: 50%默认仍按父 content width 计算，但受flex-basis、flex-grow等覆盖，实际表现可能不同 - Grid 项的百分比宽同样基于网格轨道的大小，需确认轨道本身是否用百分比定义（否则可能退化为 auto）
- 避免混用浮动与百分比宽布局，易引发文档流混乱
不复杂但容易忽略。核心就一条：百分比宽永远算的是“父元素内容区的多少”，盯住那个父容器有没有确定的 content width，再检查自己有没有 padding/border/box-sizing 搞乱了视觉结果。
