前言
之前本人写页面的时候，发现总是不能达到想要的效果，例如：
<html>
<div style="100%;height:100%">
<div style="100%;height:10%">head</div>
<div style="100%;height:60%;margin:10% 0 10% 0;">body</div>
<div style="100%;height:10%">foot</div>
<div>
</html>
本来设想的是占满整个页面的3个div，分别高10%、60%、10%，再加上间隔有两个10%，正好100%。
【PS：<margin:10% 0 10% 0> 等价于 <margin-top:10%; margin-bottom:10%> 】
【为了简便，margin-top与padding-top就采用margin与padding的格式写了】
然而，页面莫名其妙地多出了滚动条，高度超出了100%；（横屏模式下）
本人的微信小程序也用了类似的语句，结果就是foot部分的元素比预期的要高一些，导致底部出现留白（竖屏模式下）
这是怎么回事？今天本人通过测试与百度，终于找到了原因。
结论
重要的话说三遍：
margin无论left还是right还是top还是bottom都是相对于父元素的width的！
是相对于父元素的width的！
父元素的width！
【PS：padding使用%也是相对于父元素的width】
就在现在，网上仍有许多文章认为margin-top使用%是相对于父元素的height，但并不是这样，只要自己试试就知道了；
由于"10%"相对于父元素的width，"height:10%"相对于父元素的height，
导致人们惯性地认为，
"margin-left:10%"相对于父元素的width，"margin-top:10%"相对于父元素的height(我开始也是这么想的)，
然后就被坑了！
不得不说margin和padding相对于父元素的width这个设定真的很迷，但是我们改变不了语言，只能适应语言了。
解决方法
为了实现页面效果，可以将前言中的代码块修改为：
<html>
<div style="100%;height:100%">
<div style="100%;height:10%">head</div>
<div style="100%;height:10%"></div>
<div style="100%;height:60%;">body</div>
<div style="100%;height:10%"></div>
<div style="100%;height:10%">foot</div>
<div>
</html>由于margin不太好用，因此可以使用空白div代替间隔，这样就实现了3个div占满整个页面的效果了，分别高10%、60%、10%，还有两个间隔10%，加起来正好100%。
/*
目前，margin与padding使用%都是相对于父元素width的，如果将来语法改变了，本文也就过时了，还请大家留言给本人，本人会修改或删除此文，谢谢！
2020.6.29
*/