• 外边距叠加


      外边距叠加其实是一个非常简单的概念,不过,一开始我还是被其高大上的名字(margin-collapsing)唬得不轻~

      什么是外边距叠加呢?在normal流中,同一BFC下,相邻垂直外边距会重叠形成一个外边距,外边距高度为叠加的外边距较大者。(我是这样记住的:尽量在满足双方的margin下,使得margin尽量贴近border、padding、内容。如果元素没有border、padding、内容,塌得挺严重的~)

      外边距叠加的情况:

     1. 2个垂直相邻的元素,第一个元素的底外边距与第二个元素顶外边距重叠

    2.当一个元素包含另一个元素,若这两元素之间无border,padding,则它们的垂直外边距会叠加

    3.元素的顶与底边距在无内容,padding,border时也会叠加,已叠加的空元素之间也会叠加(例子:多个有margin的p元素没有高度)

      so~难道外边距叠加是一个BUG,如果是,为何不在新版本的css中剔除它呢,我认为其实很多bug不是真正意义上的bug。而是我们用的不恰当,没有深入了解css,所谓的bug不过是用错了的方法,那外边距坍塌为何出现呢?1.外边距叠加使得元素之间的距离一致  2.使得空元素不会占据过多不必要的空间  当然,第一个原因意义大些,至少,尽量减少不必要的元素节点是我们的职责~

    看出来了了吗?这里插多一句,可以看出body与html元素默认是不重合的,注意:absolute定位的最外层是基于<html>的,而relative与static的最外层定位元素是<body>~

  • 相关阅读:
    图解 SQL 各种连接查询之间的区别
    虚拟机Ubuntu无法上网问题解决过程
    SQL语言(二) java怎样连接操作数据库中的数据
    SQL语言(一)
    编写简单的用户登录界面
    Java
    java第一阶段测试
    Net Core linux docker 部署异常
    .Net Core Cap 异常
    记.Net 创建文件
  • 原文地址:https://www.cnblogs.com/pada/p/3687934.html
Copyright © 2020-2023  润新知