神奇的 margin/paddding 百分比布局

1. 今天累的有点迷茫，躺在床上看着看着面试题，突然看到个好玩的，然后自己坐起来打开电脑跑了一下代码。

2. margin、padding 在使用百分比时，它的百分比值是参照父元素的 width 值，是的，margin-top/left/right/bottom 都是 以父元素宽度为参照。

而且如果是相对于 body 的话，是响应式的，也就是你 resize 窗口大小，它会自动变化值，这实在是太好玩了【可能今天累傻了......这哪里好玩了】

代码：

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

.box-father {
  width: 300px;
  height: 300px;
  background-color: blue;
  overflow: hidden; // 利用 BFC 解决父子外边距塌陷问题
}
.box-son {
  width: 100px;
  height: 100px;
  margin-left: 10%;
  margin-top: 10%;
  background-color: pink;
  /*padding-top: 30%;*/
}

效果：

F12 Chrome 查看：