CSS中各个百分比值是相对哪个计算？

例如设置子元素 width:50%

<div class="father">
 <div class="son"></div>
</div>

.son{
  width:50%;
}

.son的

width是相对于父元素的content区域的宽度值计算
height 是相对于父元素的content区域的高度值计算
padding-left，padding-right，padding-top，padding-bottom是相对于父元素的content区域的宽度值计算
margin-left，margin-right，margin-top，margin-bottom是相对于父元素的content区域的宽度值计算

对于position:absolute的元素，计算值有些特殊
例如设置子元素 left:50%;

<div class="father">
 <div class="son"></div>
</div>

.son{
  position:absolute;
  left:50%;
}

.son的
left值或者right值是相对于包含块的宽度计算的
top值或者bottom值是相对于包含块的高度计算的

对于position:relative的元素，计算值和宽高计算规则相同
例如设置子元素 left:50%;

<div class="father">
 <div class="son"></div>
</div>

.son{
  position:relative;
  left:50%;
}

left值或者right值是相对于父元素的宽度计算的
top值或者bottom值是相对于父元素的高度计算的