margin，padding，top，left，transform：translate（10%，10%）等使用百分比的时候参造物的问题

1.margin，padding 使用百分比时候参照物的问题

（1）父元素直接规定了宽度，高度。

 #right {        width: 600px;        height: 300px;        position: absolute;        top:0;        left:0;        background-color: aqua;    }    #pp    {        margin:20% ;        padding:20%;        background-color: chartreuse;    }

 <div id="right">    <div id="pp">    </div> </div>

可以看到padding的值与margin的值都是120=600*20%
所以可以看出来，当父元素有宽度的时候，margin与padding的百分比都是相对于其父元素的width而言，padding/margin-top/bottom并不依赖于父元素的height。

2,position：absolute top left百分比问题

#right {        width: 600px;        height: 300px;        position: absolute;        top:0;        left:0;        background-color: aqua;    }    #pp    {        position: absolute;        width:30%;        height:30%;        top:10%;        left:10%;        background-color: chartreuse;    }

  <div id="right">        <div id="pp">        </div>    </div>

结果

top： 30=10%*300，left：60=600*10%，由此可见，当父元素高度，宽度已知时，left是相对于父元素的宽度width，top是相对于父元素的高度height

3.position：relative top left参照物问题

 #right {        width: 600px;        height: 300px;        position: absolute;        top:0;        left:0;        background-color: aqua;    }    #pp    {        position: relative;        width:30%;        height:30%;        top:10%;        left:10%;<pre name="code" class="html"> <div id="right">        <div id="pp">        </div>    </div>

结果：

top： 30=10%*300，left：60=600*10%，由此可见，当父元素高度，宽度已知时，left是相对于父元素的宽度width，top是相对于父元素的高度height

4.css3 中transform：translate（10%，10%），百分比的参造物问题

结果：

虽然没有显示数据，但是通过测量可以只计算出水平方向偏移 的距离 18=180*10%，竖直方向距离9=90*10%，由此可见，此时的参照物是要偏移对象本身的宽度widht与height而不是其父元素。