冷知识：反常识的margin-top与padding-top与%，你被坑过吗？

前言

之前本人写页面的时候，发现总是不能达到想要的效果，例如：

<html>
<div style="width:100%;height:100%">
  <div style="width:100%;height:10%">head</div>
  <div style="width:100%;height:60%;margin:10% 0 10% 0;">body</div>
  <div style="width: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，但并不是这样，只要自己试试就知道了；

由于"width:10%"相对于父元素的width，"height:10%"相对于父元素的height，

导致人们惯性地认为，

"margin-left:10%"相对于父元素的width，"margin-top:10%"相对于父元素的height(我开始也是这么想的)，

然后就被坑了！

不得不说margin和padding相对于父元素的width这个设定真的很迷，但是我们改变不了语言，只能适应语言了。

 

解决方法

为了实现页面效果，可以将前言中的代码块修改为：

<html>
<div style="width:100%;height:100%">
  <div style="width:100%;height:10%">head</div>
  <div style="width:100%;height:10%"></div>
  <div style="width:100%;height:60%;">body</div>
  <div style="width:100%;height:10%"></div>
  <div style="width:100%;height:10%">foot</div>
<div>
</html>

由于margin不太好用，因此可以使用空白div代替间隔，这样就实现了3个div占满整个页面的效果了，分别高10%、60%、10%，还有两个间隔10%，加起来正好100%。

 

/*

目前，margin与padding使用%都是相对于父元素width的，如果将来语法改变了，本文也就过时了，还请大家留言给本人，本人会修改或删除此文，谢谢！

2020.6.29

*/

posted @ 2020-06-29 10:44  codeToSuccess  阅读(366)  评论(0)  编辑  收藏  举报