CSS 比例单位失效主因是父容器无明确宽度，导致子元素缺乏计算参照；需检查父级 width、display、position 及 iframe/vh 兼容性，验证 em/rem 基准与 box-sizing 影响。
CSS 比例单位（如 %、vw、vh、em、rem）“失效”，最常见的原因是父容器宽度被固定值（如 px）锁定，导致子元素的百分比计算失去参照依据。
检查父级是否设置了固定宽度
百分比单位（如 width: 50%）是相对于 ** 最近的、有明确宽度的非 静态定位 祖先元素 ** 计算的。如果父容器本身没有设定宽度（比如默认 width: auto），或其宽度由内容撑开，那么 50% 就可能表现为“0”或意外收缩。
- 用 浏览器 开发者 工具（F12）选中目标元素 → 查看 Computed 面板中的
width，确认实际解析值是否为0px或远小于预期 - 向上逐层检查父元素的
width、max-width、display（如inline元素不接受宽高）、position（绝对定位 元素脱离文档流，可能影响参照） - 特别注意：Flex 容器中的子项默认不按百分比宽度生效，除非父容器有明确宽度，且子项未设置
flex: none或flex-shrink: 0
确认视口单位（vw/vh）的使用场景合法
vw 和 vh 基于视口尺寸，看似“绝对可靠”，但仍有失效条件：
- 在
iframe中，vh按照 iframe 自身高度计算，不是顶层窗口 —— 若 iframe 高度未设，100vh可能只有几十像素 - 移动端 Safari 对
vh有兼容问题（如地址栏展开 / 收起时不会重算），可改用100dvh（动态视口高度，支持较新版本） - 某些 CSS 属性不支持
vh，例如line-height: 10vh合法，但margin: 5vh 0在部分旧环境可能被忽略（建议优先用rem或媒体查询兜底）
验证字体相关单位（em/rem）的继承与基准
em 是相对于父元素 font-size，rem 是相对于根元素（）的 font-size。失效常因基准被覆盖或重置：
立即学习 “ 前端免费学习笔记（深入）”；
- 检查是否在某层父元素上写了
font-size: 0（常见于清除 inline-block 间隙），这会让所有子级em计算归零 - 确认
的font-size是否被 JS 动态修改或被 CSS 重写（如某些 UI 库会设为62.5%或10px） - 用开发者工具的 Computed 面板直接查看当前元素的
font-size值，再反推em/rem是否合理
排除 display 和 box-sizing 干扰
某些显示模式和盒模型设置会间接让比例单位“不可见”：
-
display: inline元素无视width和height—— 即使写了width: 80%也无效；应改用inline-block或block -
box-sizing: border-box不影响百分比计算逻辑，但若同时设置了padding+border，可能让内容区被压缩到看不见，误以为“没生效” - 浮动（
float）或绝对定位（position: absolute）元素，其百分比宽度仍有效，但参照的是包含块（containing block），需确认该包含块是否如你所想（例如脱离文档流后，包含块可能是最近的position: relative祖先）
