浅谈css百分比都是相对于谁来计算？？？

浅谈css百分比都是相对于谁来计算：

1、首先我们看一下，在普通文档流：

.parent {
            width: 500px;
            height: 300px;
            padding:50px;
            background: #999;
            margin-left:50px;
            font-size: 15px;
            line-height:30px;
            border: 1px solid #808080;
    }
.child {
            /* 宽度和高度的百分比：分别是相较于父元素的宽和高进行计算 */
            /* 宽度是：250px */
            width: 50%;
            /* 高度是：60px */
            height: 20%;
            /* 相较于父元素的宽度进行计算:50px */
            padding: 10%;
            /* 相较于父元素的宽度进行计算:50px */
            margin:10%;
            border:2px solid black;
            font-size: 150%;
            line-height: 150%;
            background: orange;
     }

<div class="parent">
        <div class="child">内容区域</div>
</div> 

通过上述：我们发现，子元素的宽度和高度百分比是相较于父元素的宽度和高度来进行计算；

​ 垂直方向和水平方向：padding和margin都是相较于父元素的宽度进行计算；

2、当子元素设置为float:left的时候，和标准文档流是一样的；

3、当元素为定位元素时

.parent {
           /* 父元素相对定位 */
            position: relative;
            width: 500px;
            height: 300px;
            padding:50px;
            background: #999;
            margin-left:50px;
            font-size: 15px;
            line-height:30px;
            border: 1px solid #808080;
            
        }
 .child {
            /* 子元素绝对定位 */
            position:absolute;
            /* 值为：80px;
            是相较于父元素的padding+height进行计算 */
            top:20%;
           /* 值为：120px;
            是相较于父元素的padding+width进行计算 */
            left:20%;
           /* 子元素宽度的值为：300px;
           此值是相较于父元素的padding+width来进行计算 */
            width: 50%;
            /* 子元素高度的值为：80px;
            是相对父元素的padding+height来进行计算 */
            height: 20%;
            /* 子元素的padding的值为：60px;
            是相对于父元素的padding+width来计算；*/
            padding: 10%;
            /* 子元素的margin的值为：60px;
            是相对于父元素的padding+width来计算；*/
            margin:10%;
            border:2px solid black;
            font-size: 150%;
            line-height: 150%;
            background: orange;  
        }

    <div class="parent">
        <div class="child">内容区域</div>
    </div> 

通过上述：我们发现，子元素的宽度和高度百分比是相较于父元素的(内容和padding)进行计算；

​ 垂直方向和水平方向：padding和margin是相较于父元素的宽度进行计算；