CSS中的百分比单位属于相对长度单位，其最终计算值不是固定的，而是根据对应属性的参照对象动态计算得出，这一特性让它在响应式布局场景中应用十分广泛。不同的CSS属性使用百分比作为值时，参照的计算基准并不相同，这是使用百分比单位时需要首先明确的核心规则。
百分比单位的核心特点
1. 相对性，依赖参照物计算
百分比单位没有绝对的物理尺寸，所有使用百分比的属性值，都需要基于某个参照对象的对应值来计算。如果没有明确的参照物，百分比值可能无法生效或者计算出不符合预期的结果。
2. 不同属性的参照基准不同
并非所有属性的百分比都参照父元素，不同CSS属性的百分比参照规则有明确区分，常见的参照规则如下：
- width、min-width、max-width：参照父元素的
content_width（内容宽度） - height、min-height、max-height：参照父元素的
content_height（内容高度），如果父元素高度未显式设置，百分比高度可能失效 - padding-top、padding-bottom、margin-top、margin-bottom：参照父元素的
width，即使垂直方向的间距也参照宽度计算 - padding-left、padding-right、margin-left、margin-right：参照父元素的
width - left、right：参照定位父元素的
width - top、bottom：参照定位父元素的
height - font-size：参照父元素的
font-size - line-height：参照元素自身的
font-size - transform中的translate：参照元素自身的
width和height
3. 继承时的计算特性
如果某个属性的值设置为百分比，且这个属性会被子元素继承，那么子元素继承的是百分比计算后的最终值，而不是百分比本身。比如父元素font-size设置为16px，子元素设置font-size: 120%，那么子元素最终字体大小是19.2px，子元素的子元素如果继承字体大小，继承的是19.2px，而不是120%这个百分比。
常见使用示例
实现自适应宽高盒子
利用padding百分比参照父元素宽度的特性，可以实现高度随宽度自适应变化的盒子，常用于制作固定比例的图片容器：
/* 父容器宽度100%，子容器宽高比16:9 */
.container {
width: 100%;
}
.ratio-box {
width: 80%; /* 参照container的width，占父容器80%宽度 */
padding-bottom: 45%; /* 参照container的width，80% * 9/16 = 45%，实现16:9比例 */
background-color: #f0f0f0;
position: relative;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
定位元素偏移计算
绝对定位元素使用百分比偏移时，参照的是定位父元素的对应尺寸：
.parent {
position: relative;
width: 500px;
height: 300px;
background-color: #e8e8e8;
}
.child {
position: absolute;
width: 100px;
height: 100px;
left: 50%; /* 参照parent的width，500px * 50% = 250px */
top: 50%; /* 参照parent的height，300px * 50% = 150px */
transform: translate(-50%, -50%); /* translate百分比参照自身宽高，实现居中 */
background-color: #409eff;
}
使用注意事项
- 父元素未设置明确尺寸时，百分比高度可能失效。如果父元素高度由内容撑开，子元素设置
height: 50%无法计算出有效值，需要给父元素设置明确的高度值，或者使用其他布局方案。 - margin和padding的垂直百分比参照宽度，这一规则容易和直觉冲突，使用时需要特别注意，避免垂直间距计算不符合预期。
- 百分比单位和视口单位（vw、vh）不要混淆，视口单位参照的是浏览器视口的尺寸，而百分比单位参照的是父元素或者自身的对应尺寸，适用场景不同。
- 在flex布局和grid布局中，百分比单位的参照规则可能和常规流布局有差异，比如flex子项的宽度百分比参照的是flex容器的内容区宽度，同时会受到flex属性的影响，需要结合布局规则判断最终计算值。
百分比单位的核心优势是能够跟随参照对象动态适配，非常适合响应式布局场景，但前提是明确对应属性的参照基准，避免出现计算不符合预期的问题。