CSS单位之百分比用法_基于父元素还是自身尺寸

百分比单位参考对象各不相同：width等基于父宽，height需父有明确高度，padding/margin也基于父宽，font-size基于父字体大小，transform基于自身尺寸，background相关属性基于背景定位区。

百分比宽度/高度到底参考谁？

css 里的 % 不是统一规则，它取决于具体属性和上下文。宽度（width）默认参考父元素的 width，但高度（height）在多数情况下不生效——因为父元素若没设固定高度，height: 50% 会算出 0px。

• width、max-width、padding、margin 的百分比都基于父元素的 width（注意：即使用在子元素的 padding-top 上，也还是看父宽）
• height 和 max-height 的百分比只在父元素有**明确高度**（非 auto）时才有效；否则等价于 0
• font-size 的百分比基于父元素的字体大小，和盒模型无关
• transform: translateY(50%) 这种是基于**自身尺寸**计算的，和父元素无关

为什么 height: 50% 经常没反应？

不是代码写错了，而是父容器高度为 auto，导致子元素无法算出“50%”是多少像素。浏览器需要一个确定的数值起点，而 auto 没有。

• 常见场景：给 div 设 height: 50%，但它的父级是普通文档流中的块级元素，默认 height: auto
• 验证方法：在父元素上加 outline: 1px solid red，你会发现它实际高度可能只有内容撑开那么高
• 临时解法：给父级加 height: 100vh 或 min-height: 100vh；更稳妥的是用 flex 或 grid 布局替代百分比高度依赖

padding-top: 25% 是按父宽算的，但看着像“响应式正方形”

这是个经典技巧，利用了 padding 百分比始终参照父元素宽度的特性。它和元素自身高度无关，所以能稳定生成宽高比。

• 适用场景：响应式头图、视频容器、卡片缩略图等需要保持比例的区域
• 典型写法：padding-top: 56.25%（16:9）、padding-top: 75%（4:3）
• 注意：必须配合 position: relative + 内部绝对定位元素来填充内容，否则 padding 只是留白
• 别误以为这是“让盒子变正方形”，它只是顶部留白等于父宽的 25%，盒子本身高度仍是 auto

transform 和 background-size 的 % 各自认谁？

这两个地方的百分比最容易混淆，因为它们既不看父元素，也不完全看自身——而是看“参考框”（reference box），而且规则不同。

立即学习“前端免费学习笔记（深入）”；

• transform: translateX(50%) 中的 50% 是基于**元素自身的宽**（translateY 同理看自身高）
• background-size: 50% 50% 默认基于**背景定位区（background positioning area）**，通常是 padding box；如果设了 background-origin: border-box，就按 border 区算
• background-position: 50% 50% 表示背景图片的中心对齐到定位区中心，不是“移动 50% 宽度”

百分比单位不是黑箱，它背后每一条规则都绑定着具体的参考对象。漏掉一个前提（比如父元素高度是否确定、position 是否影响定位上下文），结果就可能完全偏离预期。