margin-top百分比按父元素宽度计算，因CSS规范禁止以高度为基准以防无限循环；Flex中应改用gap实现容器宽度响应式间距。
margin百分比为什么总是按父元素宽度算，而不是高度
因为 CSS 规范明确禁止用父元素 height 作为 margin 百分比的基准——否则会触发无限循环。假设 margin-top: 10% 是按父高计算，那父高就得变大来容纳这个 margin；父高变大后，10% 又变大，margin 进一步撑高父元素……如此往复，浏览器无法收敛布局。
而宽度没这问题：块级元素默认由内容或父宽约束，换行机制天然截断横向扩张，不会形成闭环。所以所有方向的 margin（包括 margin-top 和 margin-bottom）统一按**包含块的宽度**计算，逻辑稳定、可预测。
Flex 子项里 margin 百分比“失效”的真实原因
不是失效，是参照对象错了。Flex 子项的包含块（containing block）往往不是它的 Flex 父容器，而是更外层的块级祖先。比如：
- 父容器用了
display: inline-flex→ 包含块可能退化为匿名行盒，宽度难控 - Flex 容器被套在未设
width的div里 → 那个div成了实际包含块，但你却在调试 Flex 容器 - Flex 容器本身是
position: absolute或float→ 包含块跳到视口或浮动上下文，margin-left: 10%就变成视口宽的 10%
验证方法：开发者工具选中子项 → Computed 面板 → 展开 margin-left，看 “Computed value” 后面的 px 值，再反推它是基于哪个元素的宽度算出来的。
想让间距随 Flex 容器宽度响应，该用什么替代 margin 百分比
gap 是唯一可靠方案。它直接作用于 Flex（或 Grid）容器，值就是相对于容器自身尺寸计算的：
-
gap: 5%→ 严格等于 Flex 容器宽度的 5% - 支持
row-gap/column-gap独立控制 - 不触发 margin 折叠，不依赖包含块归属，也不受
inline-flex干扰 - 兼容性已很好（Chrome 84+/Firefox 63+/Safari 14.1+），旧版可用
gap: calc(5vw)降级
别再写 margin-right: 5% 然后花两小时查为什么没效果——Flex 布局里，gap 就是专为这事设计的。
真要让 margin 百分比按高度算，有纯 CSS 办法吗
有，但代价明显：writing-mode: vertical-lr 或 vertical-rl。它把布局流旋转 90°，此时“宽度”概念切换到原垂直方向，margin-top 的百分比就变成按父元素“新宽度”（即原高度）算了。
不过要注意：
- 块级元素会水平排列且不再自动换行（原“高度方向”变无限延伸）
- margin 折叠从垂直方向转到水平方向，容易意外合并
- 文本方向、对齐、图标朝向全得重调，维护成本高
- 父元素若没显式设
height，其高度由子项撑起，margin计算仍可能不稳定
日常开发中，这种写法属于“技术上可行，但业务上不该用”。真需要高度响应式间距，优先考虑 aspect-ratio + padding-top 或 JS 动态计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
