CSS中百分比的运用

<div class="parent">
  <div class="child">
    <span>NO THANKS</span>
  </div>
</div>

.parent {
  width: 200px;
  height: 100px;
}

.child {
  width: 50%;  //和预期的一样：父元素的width的50%，200px * 50% =100px;
  height: 50%; //和预期的一样：父元素的height的50%，100px * 50% =50px;
  margin-top: 10%; //和预期的不一样：父元素的width的10%，200px * 10% =20px;
  margin-bottom: 10%; //和预期的不一样：父元素的width的10%，200px * 10% =20px;
  margin-left: 10%; //和预期的一样：父元素的width的10%，200px * 10% =20px;
  margin-right: 10%; //和预期的一样：父元素的width的10%，200px * 10% =20px;
  top: 10%; //和预期的不一样：父元素的width的10%，200px * 10% =20px;
  bottom: 10%; //和预期的不一样：父元素的width的10%，200px * 10% =20px;
  left: 10%; //和预期的一样：父元素的width的10%，200px * 10% =20px;
  right: 10%; //和预期的一样：父元素的width的10%，200px * 10% =20px;
}

综上，

除了width和height，其他属性在用到百分比来计算的时候，都是按照父元素的width属性来计算的。