我们在切图仔：我的height:100%为什么没生效？一文中讲了给height设置百分比的情况。其实其他属性本质上都是差不多的。
因此，一些重复的情况这里就不说了，请先阅读前文，再看本文。
本文直接讨论HTML5标准下的情况。

width

我们设置百分比percent，最终计算后的width是 基准 * percent。重点就是，这个基准是什么呢?

position:static(默认)|relative|sticky

与height不同的是，不管父元素有没有显示设置width，该元素的百分比基准都是父元素的实际content宽度。

这是因为在不设置width的情况下，宽度会默认撑到最大（width:auto），所以元素始终会有一个实际宽度

其他情况如min-width一起作用的场景，都和height一致。

<!DOCTYPE html>
<html>
<body>
    <div style="width:200px;">
        <div>
        <div style="width:100%;background-color:#92cbe6;">
            实际能撑到200px
        </div>
    </div>
    </div>
</body>
</html>

position:absolute

与height一致，请看前文

position:fixed

与height一致，请看前文

padding/margin

对于四个方向的padding/margin，它的基准和本元素的width基准是一样的。那它自然也分上述三种情况，这里不再赘述
需要注意一点就是，垂直方向的百分比，这里的参照值也是width而不是height

<!DOCTYPE html>
<html>
<body>
    <div style="width:200px;">
        <div>
        <div style="width:100%;padding:10%;background-color:#92cbe6;">
            width=200px
            padding=20px
        </div>
    </div>
    </div>
</body>
</html>

background-position

它比较特殊，background-position的初始值就是百分比值0% 0%。 background-position的百分比值，取的基准值是一个减法计算值，由放置背景图的区域尺寸，减去背景图的尺寸得到，可以为负值。

这个属性包括水平位置和垂直位置，它们分别参照宽度和高度。

定位left/right/top/bottom

left/right与本元素的width基准相同

top/bottom与本元素的height基准相同

font-size

基准值是直接父元素的font-size

line-height

基准值是元素本身的font-size

vertical-align

基准值是元素自身的line-height，兼容性不好

transform: translate

平移变换，在水平方向和垂直方向上也可以使用百分比，其基准值是变换的边界框的宽高。例如，一个宽度为150px，高度为100px的元素，定义transform:translate(50%, 50%)的效果是transform:translate(75px, 50px);。

注意，translate3d对应是还有第三个维度的，但是，第3个值不可以使用百分比（否则样式定义无效）

css中常用百分比计算