Web前端知识点-关于margin属性的几个问题分析

举报
发表于 2020/07/05 00:47:31 2020/07/05
【摘要】 margin属性在页面布局中发挥着很大的作用,但是在一些使用细节上有几个需要我们特别注意的地方,最常见的就是块元素在垂直方向上的外边距合并问题,本文对常见的情况都做了讨论,此外还对margin取百分比和负值时做了直观的对比解析,希望对我们理解margin属性有点帮助。

margin属性在页面布局中发挥着很大的作用,但是在一些使用细节上有几个需要我们特别注意的地方,最常见的就是块元素在垂直方向上的外边距合并问题,本文对常见的情况都做了讨论,此外还对margin取百分比和负值时做了直观的对比解析,希望对我们理解margin属性有点帮助。

一、外边距合并问题

浏览器会根据页面上放置的元素类型对外边距做不同的处理

1、当浏览器并排放置两个内联元素时,它们水平方向之间的距离如何计算?

(注:这里不考虑内联元素之间默认的空隙,已手动清除)

image.png

计算:两个span水平方向之间的距离为:margin-right(span.box1)+margin-right(span.box2)=10px+20px=30px

从以上分析过程可以得出结论

结论:并排放置两个内联元素,并且都有外边距,浏览器会根据他们的实际外边距计算他们之间的距离。简言之,并排放置的内联元素之间的水平外边距不会发生重叠

2、当浏览器上下放置两个块元素时,他们垂直方向的距离会发生什么变化?

image.png

计算:两个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、如果一个元素嵌套在另一个元素中,它们都有外边距,也会发生重叠吗?

image-20200703030406105image.png

对比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设置一个边框,使它们的外边距隔离,不要碰触,看看有什么变化?

image-20200703024039799image.png


结果发现,如果嵌套的元素之间的外边距有边框隔离,不碰触的话,就不会发生折叠,会按照各自设置的外边距显示

这就说明只有两个垂直外边距碰触到一起时才会发生折叠,即使是一个元素嵌套在另一个元素中也不例外,无论是同级关系还是嵌套关系,折叠后的值都是两者中的较大者。

所以判断两个块元素的垂直外边距是否会发生重叠的依据就是看这两个元素的外边距会不会碰触到一起

  • 如果两个元素的外边距碰到一起,就会发生折叠,取二者外边距的较大者,

  • 如果两个元素的外边距不会碰到一起,就不会发生折叠,会按照设置的外边距正常显示

二、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;在页面中水平方向居中显示。

image.pngimage-20200703000558026

现在分别设置子元素div.child的margin-left为50%和100%,看一下效果

image-20200703001136253image-20200703001103130 image.png

经过对比,可以直观得出结论,当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%,分别观察

image.png

可以看到

当margin-left为-10%时,子元素div.child相对于初始位置水平方向左移了父元素宽度的10%

当margin-top为-10%时,子元素div.child相对于初始位置垂直方向上移了父元素高度的10%

再分别设置margin-right为-10%, 设置margin-bottom的值为-10%,

image-20200703033924005image.png

可以看到

当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的情况下的讨论,其他情况这里先不做讨论。

以上有疏漏之处,欢迎指正,一起成长快乐!



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。