HTML元素的margin/padding的值使用百分比时以父元素的宽为准
HTML元素margin/padding的值如果使用百分比的时候，一律是按照父级的width来计算的，包括垂直方向上的（margin-top/margin-bottom，padding-top/padding-bottom）。
以前一直都没太注意，知道真相的我眼珠子掉下来。
百度了下得到如下精辟话语：
margin/padding-top/bottom 的百分比之所以按照 width 计算，其实理由很简单，就是要匹配主要的 use cases。那就是——要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。
知道了结论，这样的话就多了很多应用场景。
1，自适应布局： 父级样式：position:relative;padding-top:40%;子元素样式：position:absolute; height:100%;这样就可以构建一个动态的盒子，他的高度随着宽度的变化而变化。移动端布局的时候很有用，会随着不同屏幕的宽度变化而变化，从而适应多种屏幕。
2，构建动态正方形：width:50%;padding-top:50%; height:0;这样一个盒子就是一个标准的正方形了，并且随着宽度变化而变化。结合上面的自适应布局，能完成很多效果。
BTW：有时候使用这种布局的时候，文字的高度会成为一种不确定性，这个时候可以使用line-height:0来让盒子不考虑字体的高度。