aspect-ratio 属性在计算高度时，会将盒模型的内边距（padding）和边框（border）视为内容区域的一部分。这意味着当元素设置了 box-sizing: content-box（默认值）时，增加内边距会直接导致元素整体高度增加，而不仅仅是宽度按比例缩放；若使用 box-sizing: border-box，则内边距会被包含在宽高约束内，高度变化逻辑会有所不同。
默认盒模型下内边距对高度的影响
在默认的 content-box 模式下，aspect-ratio 基于内容区域的宽高比进行计算。如果给一个设置了 aspect-ratio 的元素添加垂直内边距，浏览器会先根据宽度和比例计算出内容区域的高度，然后将这个高度作为内容区高度，再加上上下内边距得到最终渲染高度。因此，内边距会使元素实际占据的垂直空间大于仅由宽高比决定的内容高度。
div {
width: 300px;
aspect-ratio: 16 / 9;
padding: 20px 0;
box-sizing: content-box; /* 默认值 */
}
/* 内容区域高度 = 300 * (9/16) = 168.75px
总高度 = 168.75 + 20 + 20 = 208.75px
Border-Box 模式下的协同计算
当设置 box-sizing: border-box 时，aspect-ratio 的计算基准发生变化。此时，指定的宽度和高度（如果显式设置了高度）或推导出的高度将包含内边距和边框。对于仅通过宽度推导高度的情况，浏览器会确保内容区加上内边距和边框后的总尺寸符合宽高比约束，或者更准确地说，aspect-ratio 依然作用于内容区，但 border-box 限制了总盒子的尺寸增长方式。实际上，在现代浏览器实现中，aspect-ratio 始终定义的是内容区的比例。在 border-box 下，如果你只设宽度，高度仍由内容区比例决定，但总盒子高度 = 内容高 + 内边距 + 边框。关键在于，aspect-ratio 不自动调整内容区大小以抵消内边距的影响，它只是固定内容区的长宽比。
div {
width: 300px;
aspect-ratio: 16 / 9;
padding: 20px 0;
box-sizing: border-box;
}
/* 内容区域高度仍为 168.75px (基于300px宽)
总高度 = 168.75 + 20 + 20 = 208.75px
注意：box-sizing:border-box主要影响显式设置height时的行为，
当height由aspect-ratio推导时，其行为与content-box类似，
即比例应用于内容区，padding额外增加高度。
显式设置高度时的冲突处理
当同时指定了 height 和 aspect-ratio 时，aspect-ratio 会覆盖显式的 height 值，除非该高度被标记为 !important。在这种情况下，内边距的计算依然遵循上述规则：先确定内容区高度以满足宽高比，再叠加内边距。例如，若强制设置 height: 100px 且 aspect-ratio: 1/1，内容区高度将被忽略，转而根据宽度和比例重新计算高度，此时内边距会在此基础上再次增加总高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
