search

minhuaF / blog

I will write my front-end story.
9 stars 1 forks source link

外边距塌陷原因和解决方法 #25

Open minhuaF opened 2 years ago

minhuaF commented 2 years ago

概念

外边距塌陷也叫做外边距合并，在文档流中相邻（兄弟、父子元素）的块级元素的外边距组合在一起变成单个外边距，只有上线外边距会出现塌陷，左右不会出现。

w3c 中对这部分的说明：点击跳转

表现

  1. 父子元素，如果父元素没有padding-top或border-top，那么上边距会和它的文档流中的第一个子元素的上边距重合，取两者的较大者，父元素的padding-top为0，也会发生重合；
  2. 两个相邻块级元素，如果上面元素存在margin-bottom，下面元素层margin-top，那么他们之间外边距不是margin-top + margin-bottom，而是取两者中的较大者。

解决办法

可在父级元素上设置以下任一属性：

  1. 1px solid transparent
  2. float: left
  3. position: absolute
  4. padding: 1px;
  5. display: inline-block;
  6. overflow: hidden;
  7. overflow: auto;

原则：

  1. 把父元素变成BFC
  2. 给父元素设置padding或border，使子元素能有对应的定位参照物

拓展

BFC(Block formatting contexts) 是css三大基本定位机制中，普通流布局中的一种。

三大基本定位机制

  1. 普通流
  2. 定位
  3. 浮动
minhuaF commented 2 years ago

flex 布局和 grid布局并不在css规范文档中，这两个是单独的定位方式吗？