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%); }