1.margin和padding的百分比是相对于父级元素的宽度而言的。
2.为什么不是相对于父级元素的高度？
CSS权威指南中的解释：我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加。
ps：元素的宽度是有限制的，在没有显性地定义宽度的情况下，元素内的内容遇到边界以后会自动换行，所以不存在无限循环现象。
3.如果我非要让百分比相对于高度而言，并且不愿意使用JS呢？
可以使用writing-mode将父级元素从水平流更换成竖直流，这样一来，margin和padding的百分比参照物就是元素的高度了。
4.更换成竖直流以后有几个需要注意的地方：
一是原本margin在竖直方向上的collapse现象更换成了水平方向
二是块级元素div水平排列，并且遇到边界不会自动换行，因为现在的水平方向相当于以前的竖直方向，是无限延伸的（可以看到图中后几个div色块溢出屏幕了）
效果如下图所示，PS现在父级元素的高度没有定值，所以等于子元素的高度
PPS如果想给这个父级div的高度一个百分比定值（相对于屏幕）的话，可以先这样子：
html,body{height:100%}
图片来了：
