100％在CSS中是什么意思？

我最常使用的CSS单位之一就是出色的％，每个属性的百分比使用的规则并不完全相同。

width/height

让我们从最基本，最直接的示例开始：width 和 height。

.self {
  position: absolute;
  height: 50%;
  width: 40%;
}

我们可以看到元素的 width 和 height 是分别基于父元素 width 和 height 的。

left/top

这些值也基于父元素的 width 和 height。如果元素的 left 值为 50%，则其左侧将位于其父元素的中间。

.self {
  position: absolute;
  height: 50%;
  width: 50%;
  margin-top: 0%;
  margin-left: 50%;
}

margin/padding

margin 的显示效果于上一个示例-它们基于其父对象的大小。

在这里注意的是，padding-left 不会改变元素本身的 width，除非该 padding-left 值大于元素本身的 width。

.self {
  position: absolute;
  height: 50%;
  width: 50%;
  padding-top: 0%;
  padding-left: 50%;
}

transform

这里 transform: translate 百分比值是基于元素本身 width 和 height。

.self {
  position: absolute;
  height: 50%;
  width: 50%;
  top: 0%;
  left: 50%;
  translate-top: 0%;
  translate-left: 50%;
  transform: translate(50%, 0%);
}