CSS百分比padding的计算基准是父元素内容宽度吗？

你的推测完全正确：百分比形式的padding取值基准是父元素的内容区实际宽度，而非父元素声明的width属性值，你测试得到的314px计算结果完全符合CSS标准规则。

你使用的测试样式如下：

/* 父元素样式 */
.player {
  box-sizing: border-box;
  padding: 100px 50px;
  width: 414px;
  max-width: 100%;
}
/* 子元素样式 */
.song-img { 
  padding-top: 100%; 
}

计算逻辑和实测结果完全匹配：

• 父元素开启border-box盒模型后，声明的width: 414px是元素内容区、左右内边距、左右边框的总宽度
• 该父元素左右内边距各为50px，无额外边框，因此实际渲染的内容区宽度为 414px - 50px - 50px = 314px
• 子元素padding-top: 100%的计算值等于父元素内容区宽度，也就是你测到的314px。

广为流传的“百分比padding以父元素宽度为基准”是不严谨的简化表述，完整规则如下：

• 绝大多数中英文网页默认使用水平书写模式，这种场景下元素的padding、margin不管是水平方向还是垂直方向的百分比值，计算基准都是其包含块（通常为父元素）的内容区宽度
• 只有当父元素使用默认box-sizing: content-box、且没有左右内边距和边框时，父元素声明的width值才刚好等于内容区宽度，这时候简化表述看起来成立；一旦父元素开启border-box、或是存在左右内边距/边框，内容区宽度会小于声明的width值，简化说法就会出现偏差。
• 容易踩的误区：哪怕是padding-top、padding-bottom这类垂直方向的内边距，设置百分比时的计算基准依然是父元素内容区宽度，和父元素本身的高度没有任何关系。

内容的提问来源于stack exchange，提问作者vebeo