我最常使用的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%);
}