美文网首页
BFC的特性和inline-block缝隙问题

BFC的特性和inline-block缝隙问题

作者: 种谔 | 来源:发表于2016-03-11 18:22 被阅读0次

1.概念:
BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。

2.什么样的元素会是BFC

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

3.BFC的一些特点
1.如果子元素中存在浮动元素则会撑开高度和宽度来容纳浮动的子元素。
2.BFC的兄弟元素如果为浮动元素,并不会无视浮动元素的存在。
3.外边距合并的情况下,可以在要在合并的每个元素上包裹一层div,设置该div为BFC即可。

4.inline-block缝隙解决方案

  • 标签与标签紧挨着写,内容可以分开.
  • 设置margin-left负值.
  • 给元素设置浮动.
  • 元素父级设置font-size:0;自身再设置font-size:

相关文章

  • BFC的特性和inline-block缝隙问题

    1.概念:BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的...

  • css样式2

    inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐? inli...

  • 去除inline-block元素的内缝隙/BFC

    去除inline-block元素的内缝隙的几种方法 IE8以下不支持inline-block 去除inline-b...

  • 关于CSS的BFC

    参考:理解CSS布局和BFCCSS深入理解流体特性和BFC特性下多栏自适应布局 1、概念BFC(Block For...

  • BFC 的作用

    BFC 的定义: 对元素设置 float, absolute, inline-block (table-cell,...

  • inline-block的缝隙

    inline-block的缝隙 元素加inline-block之后默认右边是有缝隙的,如果在子元素设置font-s...

  • 关于Inline-block 和img标签的缝隙问题

    属性为inline-block的标签,在书写代码是,若它们之间存在换行或空格。那么它们在页面上显示出来的效果,就是...

  • 前端面试题之CSS(四)

    BFC 是什么?如何生成 BFC?有什么特性?BFC 有什么作用?举例说明 BFC(Block formattin...

  • 高度塌陷

    高度塌陷问题:子元素浮动父元素的高度没了,就会造成高度塌陷,可以开启bfc来解决这个问题,bfc有三种特性 1.父...

  • BFC

    一、什么是BFC? bfc即:block formatting contexts,具有bfc特性的元素可以看作是隔...

网友评论

      本文标题:BFC的特性和inline-block缝隙问题

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