百分比布局不是“设个 width: 50% 就能自适应”，它依赖父容器的宽度上下文、盒模型行为和高度链完整性；多数失效问题出在参照对象错误或 box-sizing 被忽略上。
直接说结论：百分比布局不是“设个 width: 50% 就能自适应”，它依赖父容器的宽度上下文、盒模型行为和高度链完整性；多数失效问题出在参照对象错误或 box-sizing 被忽略上。
为什么 width: 50% 有时完全不生效
浏览器计算百分比宽度时，始终以**包含块（containing block）的 content box 宽度**为基准。如果父元素没显式设宽（比如只是 display: block 且无 width、max-width 或 flex/grid 约束），它的宽度由内容撑开——此时子元素的 50% 就是“一个不确定值的一半”，结果飘忽不定。
常见失效场景：
- 父容器是默认
div，没设width、max-width或没嵌套在 flex/grid 容器中 - 中间某层父元素用了
float或position: absolute，导致包含块变成视口或最近定位祖先，脱离预期层级 - 忘了
box-sizing: border-box，而父容器有padding或border，子元素width: 100%实际溢出
验证方法：用开发者工具看 computed 样式里父元素的 width —— 如果显示 auto，那子元素的百分比基本已失效。
height: 50% 几乎总失败，该用什么替代
CSS 中 height: 50% 要求整条祖先链（包括 html 和 body）都显式设高，否则会退化为 auto。现实中极少需要这么严格的高度链，硬写只会反复踩坑。
更可靠的做法：
- 用
height: 100vh或min-height: 100dvh（iOS Safari 兼容更好）替代整屏高度需求 - 对容器用
display: flex+flex-direction: column，子项用flex: 1占满剩余空间 - 要做正方形容器（如头像框），用
padding-top: 100%+height: 0+ 绝对定位子元素，而非height: 100%
注意：td 内设 height: 100% 基本无效，优先换 display: grid 或 table-layout: fixed。
padding 和 margin 的百分比全按父宽算
这是最容易误解的一点：padding-top: 20%、margin-bottom: 10%，无论方向，**全部参照父元素的 width**，和父元素 height 毫无关系。
所以这些写法常被误用：
-
padding-top: 50%想做 1:1 正方形？它确实能撑高容器，但前提是父宽已知且稳定 -
margin-top: 20%想垂直居中？别指望，它只随父宽变，和视口高度无关
真正可控的垂直间距建议用 vh 单位（如 margin-top: 5vh）或 flex 布局的 align-items / justify-content。
Flex/Grid 里还该不该写 width: 50%
可以写，但语义弱、优先级低、易被覆盖。Flex 容器中，width 只作为初始基准，实际尺寸由 flex-grow、flex-shrink 和内容最小宽度决定；Grid 列轨道若混用 % 和 fr，数值容易错位。
更推荐的写法：
- 两列等分：Flex 中用
flex: 1代替width: 50%；Grid 中用grid-template-columns: 1fr 1fr - 三七分：Flex 中用
flex: 3和flex: 7；Grid 中用grid-template-columns: 3fr 7fr - 需要响应式断点时，直接在媒体查询里改
flex值或grid-template-columns，比切多个width更干净
流式布局真正的复杂点不在百分比本身，而在你是否清楚每个百分比背后那个“参照物”是谁——它可能不是你眼睛看到的父 div，而是最近的定位祖先、flex 容器，甚至视口。盯着 computed 样式看宽度来源，比背规则管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
