Web前端知识点-关于margin属性的几个问题分析
margin属性在页面布局中发挥着很大的作用，但是在一些使用细节上有几个需要我们特别注意的地方，最常见的就是块元素在垂直方向上的外边距合并问题，本文对常见的情况都做了讨论，此外还对margin取百分比和负值时做了直观的对比解析，希望对我们理解margin属性有点帮助。
一、外边距合并问题
浏览器会根据页面上放置的元素类型对外边距做不同的处理
计算：两个div垂直方向之间的距离为：margin-bottom(div.box1)+margin-top(div.box2)=10px+20px=30px ?
实际上他们之间的距离并非是期望的30px，而是20px，为什么？
这是因为浏览器上下放置两个块元素时，它们垂直方向的外边距会发生重叠，浏览器会把他们之间的外边距会折叠在一起，折叠后的外边距就是两个外边距中较大的那个外边距的大小。
所以重新计算两个div垂直方向之间的距离为：
max(margin-bottom(div.box1),margin-top(div.box2))=max(10px,20px)=20px
3、如果一个元素嵌套在另一个元素中，它们都有外边距，也会发生重叠吗？
对比div.parent和div.child设置外边距前和设置外边距后的渲染结果发现：
水平方向：div.child和div.parent之间的外边距就是设置的20px，未发生折叠，div.parent和body之间也是设置的10px
垂直方向：div.child和div.parent之间的外边距发生了重叠，取二者中较大者，为20px，如图，div.child和div.parent上边重叠，和body的上边之间距离为20px
此时，如果为div.parent设置一个边框，使它们的外边距隔离，不要碰触，看看有什么变化？
结果发现，如果嵌套的元素之间的外边距有边框隔离，不碰触的话，就不会发生折叠，会按照各自设置的外边距显示
这就说明只有两个垂直外边距碰触到一起时才会发生折叠，即使是一个元素嵌套在另一个元素中也不例外，无论是同级关系还是嵌套关系，折叠后的值都是两者中的较大者。
所以判断两个块元素的垂直外边距是否会发生重叠的依据就是看这两个元素的外边距会不会碰触到一起
如果两个元素的外边距会碰到一起，就会发生折叠，取二者外边距的较大者，
如果两个元素的外边距不会碰到一起，就不会发生折叠，会按照设置的外边距正常显示
二、margin取值问题
margin属性取值可以是长度值，也可以是百分比，若取值是长度值，比较直观，容易理解。但初次学习时，对外边距取百分比和负值时，往往没有比较清晰的认识，现分别分析如下：
1、margin取值为百分比时，是以谁为基准的？
先看一个简单HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>关于margin属性的几个问题</title>
<style>
body{border: 1px solid black;}
.parent { width: 300px;height: 300px; background: silver;margin: 10px auto;}
.child{width: 100px;height: 100px;background: pink;}
</style>
</head>
<body>
<div class="parent">
<div class="child">div.child</div>
</div>
</body>
</html>
现在有一个指定宽度的父元素div.parent和一个子元素div.child，父元素通过margin: 10px auto;在页面中水平方向居中显示。
现在分别设置子元素div.child的margin-left为50%和100%，看一下效果
经过对比，可以直观得出结论，当margin取值为百分比时，是以元素的父元素的宽度为基准的
2、margin取值为负值时
注意：为避免垂直外边距合并，给父元素设置了一个border属性；为观察是否会影响其他元素，div.child后面再跟一个div元素
<div class="parent"> <div class="child">div.child</div> <div>看我往哪走？</div> </div>
分别设置div.child的margin-left为-10%， 设置margin-top的值为-10%，分别观察
可以看到
当margin-left为-10%时，子元素div.child相对于初始位置水平方向左移了父元素宽度的10%
当margin-top为-10%时，子元素div.child相对于初始位置垂直方向上移了父元素高度的10%
再分别设置margin-right为-10%， 设置margin-bottom的值为-10%，
可以看到
当margin-right为-10%时，子元素div.child并不会相对于div.parent产生位移
当margin-bottom为-10%时，子元素div.child也并不会相对于div.parent产生位移，但是紧随其后的元素会上移
这说明，
当给一个元素设置margin-left和margin-top为负值时，该元素将在该方向上产生位移
当给一个元素设置margin-right和margin-bottom为负值时，元素相对于父元素不会发生移动，但是后面的元素会产生相同方向的位移，并覆盖自己。
以上是我自己在用到marging属性时，对于比较疑惑的地方做的一些总结，只针对于static元素在设置width的情况下的讨论，其他情况这里先不做讨论。
以上有疏漏之处，欢迎指正，一起成长快乐！
- 点赞
- 收藏
- 关注作者
评论（0）