百分比宽度失效的根本原因是子元素缺乏明确的宽度参照系。父容器未设置宽度、浮动导致塌陷、table-layout: auto、padding/margin 百分比参照父宽而非高、Flex/Grid 中 width 被覆盖等，均会使百分比失去计算依据。
百分比宽度失效：父容器没宽度，子元素再写width: 50%也没用
你看到的“百分比不生效”，大概率不是 CSS 写错了，而是子元素的包含块（通常是父 div）压根没有可计算的宽度。浏览器对 width: 50% 的解释是「父元素 content box 宽度的一半」，如果父元素是默认 display: block 且没设 width、max-width 或没被 flex/grid 约束，它的宽度就是内容撑出来的 auto——那 50% 就是 auto 的一半，结果不可控。
检查方法很简单：打开开发者工具，选中父容器，在「Computed」面板看 width 是不是显示 auto。如果是，就说明百分比失去了参照。
- 确保父容器有明确宽度来源：比如
max-width: 1200px+margin: 0 auto，或嵌套在display: flex/display: grid容器里 - 避免靠
width: 100%传递宽度：body 默认已是 100%，中间某一层漏了约束，整条链就断了 - 别在浮动父容器里直接用百分比：浮动会脱离文档流，父容器高度塌陷后，宽度上下文也跟着丢失
table-layout: fixed 不配 <col> 就等于没设
表格写 width: 100% 却总差一点，或者列宽忽大忽小，问题不在百分比本身，而在浏览器默认走的是 table-layout: auto 模式——它要等所有内容加载完才动态算列宽，过程中反复重排，sub-pixel 渲染一插值，就出现 1px 偏移或抖动。
table-layout: fixed 必须和 <col> 配合才能起效。只加 table-layout: fixed 而没给列指定宽度，浏览器会 fallback 到第一行 <th> 的 <code>width 属性；没写，就按最小内容宽渲染，看起来还是乱的。
立即学习“前端免费学习笔记（深入）”；
-
<col>必须紧接在<table> 开始标签后、<code><thead> 前，放错位置（比如塞进 <code><thead> 里）会被忽略 <li>支持 <code>px、%、em，不支持fr；例如：<col width="30%">、<col width="120"> - 所有列百分比加起来不必等于 100%，浏览器会自动归一化；但混用 px 和 % 时，px 列先占位，剩余空间再分给 % 列
- 用
padding-top: 100%+height: 0+ 绝对定位子元素（如position: absolute; top: 0; left: 0; width: 100%; height: 100%） - 改用
aspect-ratio: 1 / 1（现代浏览器支持，更直观） - 避免在父元素有
border或padding时直接写width: 100%：记得加box-sizing: border-box，否则总宽溢出 - Flex 布局中，用
flex: 2/flex: 3替代width: 40%/width: 60%，语义清晰，还能自动处理最小宽度 - Grid 布局中，统一用
fr单位定义列轨道，比如grid-template-columns: 3fr 2fr 1fr，所有行共享同一套列定义，彻底杜绝表头与内容列错位 - 别在同一个容器里混用
width、flex、grid-column——权重和计算逻辑冲突，调试时很难理清谁赢了
padding/margin 百分比全按父宽算，别指望它响应高度
写 padding-top: 50% 想做正方形？失败很正常——因为 padding 和 margin 的百分比值，**无论上下左右，全部参照父元素的 width**，和父元素 height 毫无关系。这是 CSS 规范定死的，不是 bug。
想让一个容器宽高相等（比如头像框、轮播图占位），得绕开 height 依赖：
Flex/Grid 里还该不该用 width: 50%？优先级太低
在 display: flex 容器里给子项写 width: 50%，它只是初始基准，很快会被 flex-grow、flex-shrink 和内容挤压覆盖。尤其当内容长度差异大时，列宽根本对不上——表头和数据行错位，就是这么来的。
Grid 更干脆：grid-template-columns: 60% 40% 虽能用，但和 1fr 2fr 混用时，百分比会按剩余空间重新分配，容易算错。
混合布局里百分比偏差的根源，从来不是百分比本身不可靠，而是你没控制好它的参照系。父容器宽度缺失、表格列宽未锁定、padding 基准误判、Flex 中 width 被覆盖——这些才是真坑。修复时盯住「谁在算」「参照谁」「有没有被覆盖」这三点，比调一堆 hack 有用得多。
