彻底掌握CSS中的percentage百分比值使用

为了彻底掌握 CSS 中的百分比值，我们需要先了解它们被用在哪些地方以及它们的计算方式。下面是一些常见的使用场景及解释：

在宽度和高度中使用百分比

在 CSS 中，可以使用百分比值设置元素的宽度和高度。这个值是相对于父元素的宽度和高度计算的。

.container {
  width: 50%;
  height: 100%;
}

在上面的代码中，.container 元素的宽度为其父元素宽度的50%，高度为其父元素高度的100%。这意味着如果父元素的宽度和高度改变了，.container 元素的宽度和高度也会相应改变。

在字体大小中使用百分比

在 CSS 中，也可以使用百分比值设置元素的字体大小。这个值是相对于父元素的字体大小计算的。

.container {
  font-size: 150%;
}

在上面的代码中，.container 元素的字体大小为其父元素字体大小的150%。这意味着如果父元素的字体大小改变了，.container 元素的字体大小也会相应改变。

示例1：使用百分比设置图片的宽度和高度

<div class="container">
  <img src="example.jpg" alt="Example image">
</div>

.container {
  width: 50%;
}
.container img {
  width: 100%;
  height: auto;
}

在上面的代码中，.container 元素的宽度为其父元素宽度的50%，而内部的 img 元素的宽度则被设置为 100%。这会使图片相对于 .container 的宽度变为 100%，同时保持其高度的比例，让图片在.container 中处于适当的大小。

示例2：使用百分比设置圆形头像

<div class="avatar">
  <img src="example.jpg" alt="Example image">
</div>

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: auto;
}

在上面的代码中，.avatar 元素被设置为一个圆形，且使用 overflow: hidden 来隐藏超出元素边界的部分。而内部的 img 元素则会被设置为 100% 的宽度，让它与 .avatar 相同的大小。这会使圆形头像位于容器中心，让边缘完全填充容器且不变形。