百分比单位参考对象各不相同：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 是否影响定位上下文），结果就可能完全偏离预期。 
