美文网首页
task11 inline-block、BFC、边距合并

task11 inline-block、BFC、边距合并

作者: 咸吧 | 来源:发表于2016-07-02 08:04 被阅读0次

在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

如何合并?

  • 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时,折叠结果是两者的相加的和。

如何不合并?

  • 创建了新的BFC的元素(例如浮动元素或者'overflow'值为'visible'以外的元素)与它的子元素的外边距不会折叠
  • 浮动元素不与任何元素的外边距产生折叠(包括其父元素和子元素)
  • 绝对定位元素不与任何元素的外边距产生折叠
  • inline-block元素不与任何元素的外边距产生折叠
父子外边距合并

去除inline-block内缝隙有哪几种常见方法?

  • 去掉li标签之间的空格
  • 负margin-left,注意第一个li要去掉负margin-left
  li {
      margin-left:-4px;
        }
  div>li:firstchild {
          margin-left:0;
      }
  • 浮动
 div {
       overflow:auto;
          }
 div>li {
           float:left;
          }
  • 子元素inline-block 父元素font-size:0;
    div {
          font-size:0;
           }
    div>li {
           dispaly:inline-block;
           font-size:12px;
           }
    

父容器使用overflow: auto| hidden撑开高度的原理是什么?

当overflow设置为auto或scroll或hidden时可以触发BFC,使得父容器能够包裹浮动元素。
overflow撑起父容器高度
参考文章深入理解CSS溢出overflow

BFC是什么?如何形成BFC,有什么作用?

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
触发BFC条件:

  • float的值不为none。
  • overflow的值为auto,scroll或hidden。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

BFC的作用:在布局上自动填满,除去浮动内容以外的剩余空间,也就是自适应布局。** PS:BFC形成独立空间,外边距不与其他元素发生合并。 **
参考文章:BFC特性下多栏自适应布局

浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法?

高度塌陷是指父容器内部的子元素由于浮动导致其脱离了文档流,父容器认为内部没有元素,高度因此将塌陷为0。

解决方法:

  • 清除浮动
.clearfix:after  {
      content:'';
      display:block;
      clear:both;
}
  • BFC 父容器 overflow:hidden|auto;

以下代码每一行的作用是什么? 为什么会产生作用? 和BFC撑开空间有什么区别?

/* 在父容器内部最后添加一个元素 */
.clearfix:after { 
                    /* 元素内容为空 */
                    content: ''; 
                    /*元素为块级元素 */
                    display: block;
                    /*  清除左右两侧浮动 */ 
                    clear: both;
                    } 
.clearfix {  
             /* 使清除浮动兼容ie6,ie7  */
              *zoom: 1;
              }

clearfix是在父容器里设置了一个空的div清除浮动。而BFC是形成了一个独立空间,不会与其他元素有相互作用。

相关文章

  • task11 inline-block、BFC、边距合并

    在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。 在CSS当中,相邻...

  • 前端基础(问答8)

    keywords: inline-block、BFC、边距合并、overflow、高度塌陷。 在什么场景下会出现外...

  • inline-block、BFC、边距合并

    1 . 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 合并场景:相...

  • inline-block、BFC、边距合并

    1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。 当block元...

  • inline-block、BFC、边距合并

    收拾心情,重新出发。加油。 一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距...

  • inline-block、BFC、边距合并

    1. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 外边距合并:外...

  • inline-block、BFC、边距合并

    在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 同一文档流中的两个相...

  • inline-block、BFC、边距合并

    1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 相邻元素当两个元...

  • inline-block、BFC、边距合并

    1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 外边距合并的场景...

  • inline-block、BFC、边距合并

    一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 块元素的top与...

网友评论

      本文标题:task11 inline-block、BFC、边距合并

      本文链接:https://www.haomeiwen.com/subject/hfrqjttx.html