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