CSS百分比单位详解：如何灵活控制元素尺寸？

CSS中的百分比单位（%）是一个非常强大的工具，它能让你的布局更加灵活和自适应。但很多新手（甚至一些有经验的开发者）在使用百分比时常常遇到各种“奇怪”的问题。今天，我们就来彻底搞懂它！

1. 百分比单位的基本概念

百分比单位是相对于某个参考值计算的，而这个参考值取决于它所应用的CSS属性。比如：

width: 50% → 相对于父元素的宽度
height: 30% → 相对于父元素的高度（但父元素必须有明确的高度设定，否则可能无效！）
padding: 10% → 注意！padding的百分比是相对于父元素的宽度，而不是高度

2. 百分比单位的常见应用场景

(1) 响应式布局

.container {  
  width: 80%; /* 相对于父容器宽度 */  
  margin: 0 auto; /* 水平居中 */  
}

这样，无论屏幕大小如何变化，容器都会自动调整宽度。

(2) 图片或视频的宽高比控制

.video-container {  
  width: 100%;  
  padding-top: 56.25%; /* 16:9 宽高比 (9/16=0.5625) */  
  position: relative;  
}

通过padding-top: 56.25%，可以实现一个自适应的16:9视频容器。

(3) 字体大小的百分比

body {  
  font-size: 16px;  
}  
h1 {  
  font-size: 150%; /* 相当于 24px (16 * 1.5) */  
}

字体百分比是相对于父元素的font-size计算的。

3. 百分比单位的坑与解决方案

(1) 高度百分比无效？

.child {  
  height: 50%; /* 如果父元素没有明确高度，这个值无效！ */  
}

解决方案：确保父元素有明确的高度设定（如height: 300px或height: 100vh）。

(2) `transform`中的百分比

.element {  
  transform: translateX(50%); /* 相对于元素自身的宽度 */  
}

注意：transform的百分比是相对于元素自身尺寸，而不是父元素！

(3) `margin`和`padding`的百分比

.box {  
  padding: 5%; /* 相对于父元素的宽度，而不是高度！ */  
}

这一点经常让人困惑，但记住：padding和margin的百分比都是相对于父元素的宽度计算的。

4. 百分比 vs 其他单位（vw/vh/rem/em）

vw/vh → 相对于视口宽度/高度（1vw = 1%视口宽度）
rem → 相对于根元素（<html>）的字体大小
em → 相对于当前元素的字体大小