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。

（使用em为单位时，相对的时本身字体大小）

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而不是其父元素。