首先确定一下答案：
不一定。子元素的height是父元素高度的百分比，但其他的例如margin-top都是父元素宽度的百分比。

下面敲代码验证一下

第一步：

  1. <div class="father">
  2.     <div class="child"></div>
  3. </div>
  1. div.father{
  2.     width:200px;
  3.     height:100px;
  4.     background-color:red;
  5. }
  6. div.child{
  7.     width:50%;
  8.     height:50%;
  9.     background-color:blue;
  10.     margin-top:25%;
  11.     margin-left:50%;
  12. }

image.png

会发现父元素掉下来一段距离，这是因为父元素使用了子元素的margin-top设置，这一块内容在之前写的BFC文章中有详细介绍。那就需要完善代码，让子元素具有自己的独立渲染区域。

第二步：

  1. <div class="father">
  2.     <div class="container">
  3.         <div class="child"></div>
  4.     </div>
  5. </div>
  1. div.father{
  2.     width:200px;
  3.     height:100px;
  4.     background-color:red;
  5. }
  6. div.container{
  7.     overflow:hidden;
  8.     width:inherit;
  9.     height:inherit;
  10. }
  11. div.child{
  12.     width:50%;
  13.     height:50%;
  14.     background-color:blue;
  15.     margin-top:25%;
  16.     margin-left:50%;
  17. }

image.png
可以看到子元素设置margin-top:25%;margin-left:50%;就位于父元素的左下角了，这说明margin-top是按照父元素的width来计算的。