width百分比基于包含块width计算；普通流中为父元素content-box，绝对定位时为最近已定位祖先的padding-box，fixed时为视口；height百分比需包含块有明确height，否则退化为0；padding/margin百分比也基于包含块width。
width 百分比始终基于包含块（containing block）的 width 计算，不是父元素 content-box 宽度，
也不是视口宽度，更不是“看起来像父级”的那个盒子。 一旦搞错包含块，width: 50% 就可能缩成一条线，或撑爆容器——这不是 bug，是标准行为。
包含块怎么确定？定位流 vs 普通流
包含块不是简单等同于“直接父元素”，它取决于元素的定位方式：
- 普通流中（
position: static或relative），包含块通常是**父元素的 content-box**（即不包括 padding、border、margin 的纯内容区域） -
绝对定位（
position: absolute）时，包含块是**最近的已定位祖先（position: relative/absolute/fixed/sticky）的 padding-box**（含 padding，不含 margin） -
固定定位（
position: fixed）的包含块是**视口（viewport）**，此时width: 100%真的是占满整个屏幕宽（但需注意：若没设left: 0，它仍可能偏移）
为什么 height: 100% 经常失效？
因为 height 百分比是相对于包含块的 height 计算的，而绝大多数父元素的 height 默认是 auto（由内容撑开）。只要包含块高度未被显式设定（如 height: 400px 或 height: 100vh），子元素的 height: 100% 就会退化为 0 —— 这是 CSS 规范明确定义的“未定义行为”。
常见错误写法：
.parent { width: 300px; } /* 没设 height */
.child { width: 100%; height: 100%; } /* height 实际为 0 */修复方法（任选其一）：
- 给包含块加明确高度：
height: 400px或min-height: 100vh - 用 Flex 布局替代百分比高度：
.parent { display: flex; }+.child { flex: 1; } - 对绝对定位子元素，确保其定位祖先有明确高度（哪怕只是
height: 1px，再靠内容撑开也不行——必须是计算值非auto）
padding/margin 百分比也看 width？没错，而且是同一个包含块
这是最反直觉但高频踩坑点：padding-top、padding-bottom、margin-top、margin-bottom 的百分比值，**全部基于包含块的 width 计算**，不是 height，也不是自身 width。
这意味着：
-
padding-top: 20%在一个 500px 宽的包含块中 =100px，哪怕该元素自身高度只有 20px - 垂直方向的 margin/padding 百分比无法随高度响应变化，容易导致布局错位
- 想实现“等比例正方形”？可用
padding-bottom: 100%+height: 0+ 子元素position: absolute，就是利用了这个规则
真正难的不是记住规则，而是调试时一眼识别出“当前元素的包含块到底是谁”。打开浏览器开发者工具，把鼠标悬停在 computed 样式里的 width 上，看它实际解析成多少 px——那个数值背后，就是你正在和之博弈的包含块宽度。
