zoukankan      html  css  js  c++  java
  • 外边距叠加

      外边距叠加其实是一个非常简单的概念,不过,一开始我还是被其高大上的名字(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>~

  • 相关阅读:
    paip.重装系统需要备份的资料总结..
    poj3078
    poj3009
    poj2151
    poj3274
    poj3436
    VC++:打开、保存文件对话框和浏览文件夹对话框
    目前所有的视频格式都有哪些?
    CMSHFlexGrid 类用法
    Matlab的ActiveX接口_百度文库
  • 原文地址:https://www.cnblogs.com/pada/p/3687934.html
Copyright © 2011-2022 走看看