精华内容
下载资源
问答
  • bfc ifc

    2015-09-27 21:24:48
    bfc=block formatting context(块级格式化上下文) 布局规则 - 1.bfc内部元素都会按照垂直方式来放 - 2.盒子在垂直方向上的margin值会重叠 - 3.内部盒子会以bfc的左边(右边)线接触,浮动也是这样 - 4.bfc...
    bfc=block formatting context(块级格式化上下文)
    
    布局规则
    - 1.bfc内部元素都会按照垂直方式来放
    - 2.盒子在垂直方向上的margin值会重叠
    - 3.内部盒子会以bfc的左边(右边)线接触,浮动也是这样
    - 4.bfc区域不会与浮动盒子重叠
    - 5.bfc环境中的子元素一外界分离,不会影响到外面的元素,而外面的元素也不会 影响到bfc里面的元素 
    - 6.bfc中浮动元素会参与计算


    bfc触发方式: float 值不为none position :abusolute,fixed; display: inline-block,table-cell,table-caption,flex,inline-flex overflow:不为visible\


    ifc= inline formatting context(行级格式化上下文)
    布局规则
    - 1.ifc中的元素会在一行上从左到右排列
    - 2.在一行上的所有元素会在该区域形成一个行框
    - 3.行框的宽度为包含框的宽度,高度为行框中最高元素的高度
    - 4.浮动的元素不会再行框中,并且浮动元素会压缩行框的宽度
    - 5.行框的宽度容纳不下子元素时,子元素会换到下一行显示,并会产生新的行框
    - 6.行框内的元素遵循text-align  和 vertical-align
    展开全文
  • CSS3之 BFC IFC GFCFFC

    2020-06-04 11:33:50
    它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及其他元素的关系相互作用。 BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面...

    What’s FC?

    一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

    BFC

    BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。如何产生BFC?
    float的值不为none。
    overflow的值不为visible。
    position的值不为relative和static。
    display的值为table-cell, table-caption, inline-block中的任何一个。
    那BFC一般有什么用呢?比如常见的多栏布局,结合块级别元素浮动,里面的元素则是在一个相对隔离的环境里运行。

    IFC

    IFC(Inline Formatting Contexts)直译为"内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)
    IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。
    那么IFC一般有什么用呢?
    水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
    垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

    GFC

    GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。
    那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。

    FFC

    FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少safari和chrome还是OK的,毕竟这俩在移动端才是王道。
    Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。
    伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

    文章转自 https://www.cnblogs.com/dingyufenglian/p/4845477.html

    展开全文
  • 项目属性集合 BFC IFC

    2019-09-10 17:18:01
    【内容】项目属性 BFC IFC FFC GFC 文档流 脱离文档流… [主体]order、flex-grow、flex-shrink、flex-basis、flex、align-self… 项目属性: 设置容器内项目相关样式,用于设置项目的尺寸、位置,以及对项目的对齐...

    【前言】2019.9.10

    【内容】项目属性 BFC IFC FFC GFC 文档流 脱离文档流…
    [主体]order、flex-grow、flex-shrink、flex-basis、flex、align-self…

    项目属性:

    设置容器内项目相关样式,用于设置项目的尺寸、位置,以及对项目的对齐方式做特殊设置。

    项目元素属性集合:
    order、flex-grow、flex-shrink、flex-basis、flex、align-self

    项目属性:

    ①沿主轴方向上的排列顺序order: 0(默认值) | <integer整数>
    ②项目的收缩因子flex-shrink: 1(默认值) |
    ③项目的扩张因子flex-grow: 0(默认值) |
    ④项目width属性替代品flex-basis: auto(默认值) | px
    ⑤flex-grow、flex-shrink、flex-basis的简写方式:flex 属性
    ⑥项目在行中交叉轴方向上的对齐方式align-self: auto(默认值) | flex-start | center | flex-end | baseline |stretch

    order属性作用:设置项目沿主轴方向上的排列顺序,数值越小,排列越靠前,属性值为整数。
    在这里插入图片描述

    flex-shrink属性作用:

    时当项目在主轴方向上溢出,通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子,属性值取非负数
    未设置flex-shrink时,默认flex-shrink值为1
    在这里插入图片描述
    在这里插入图片描述
    扩张因子flex-grow: 0(默认值) |

    场景:grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,此时flex-grow就可以使得子元素扩张,分享父元素的空间。

    取值:flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。

    扩张因子flex-grow: 0(默认值) |
    分析:
    项目1:扩张因子为0默认值,则不会索取父级多余空间
    项目2:扩张因子为1,会索取剩余空间,最终大小为
    自身宽度(50px)+获取的剩余空间宽度250*(1/(1+2))=133.33px
    项目3:扩张因子为2,会索取剩余空间,最终大小为
    自身宽度(50px)+获取的剩余空间宽度250*(2/(1+2))=216.67px

    flex 属性
    本质:
    flex-grow,flex-shrink,flex-basis的简写方式。
    值设置为none,等价于00 auto。值设置为auto,等价于1 1 auto。

    align-self属性
    设置项目在行中交叉轴方向上的对齐方式,用于覆盖容器的align-items,可以对项目的对齐方式做特殊处理。
    默认属性值为auto,继承容器的align-items值,当容器没有设置align-items时,属性值为stretch。

    align-self: auto(默认值) | flex-start | center | flex-end | baseline |stretch

    首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。

    不同类型的 Box, 会参与不同的 Formatting Context(译为:格式化上下文)(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。接下来看看有哪些盒子
    ①block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
    ②inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

    Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

    最常见的 Formatting context 格式化上下文有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

    BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与,

    它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

    (1)内部的Box会在垂直方向,一个接一个地放置。
    (2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
    (3)每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    (4)BFC的区域不会与float box重叠。
    (5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    (6)计算BFC的高度时,浮动元素也参与计算(清除浮动)
    ul–li–float------父级–高度塌陷----overflow:hidden----触发BFC属性—计算BFC的高度时,浮动元素也参与计算

    哪些元素会生成BFC?

    (1)根元素
    (2)float属性不为none
    (3)position为absolute或fixed
    (4)display为inline-block, table-cell, table-caption, flex, inline-flex
    (5)overflow不为visible,

    overflow:hidden—触发BFC属性—BFC的区域不会与float box重叠

    浮动覆盖问题
    (1)根据BFC布局规则第3条:
    每个元素的margin box的左边, 与包含块border box的左边相接触。即使存在浮动也是如此。
    因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

    1. 浮动覆盖问题
      根据BFC布局规则第四条:
      BFC的区域不会与float box重叠。
      我们可以通过触发main生成BFC, 来实现自适应两栏布局。当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。

    .main{overflow:hidden;}

    2清除浮动影响(元素浮动后造成父级高度塌陷)

    根据BFC布局规则第六条:
    计算BFC的高度时,浮动元素也参与计算。为达到清除内部浮动,以触发父级生成BFC,那么父级par在计算高度时,par内部的浮动元素child也会参与计算。

    1. 清除浮动影响(元素浮动后造成父级高度塌陷)
    2. 垂直方向上的兄弟元素会发生边距重叠(听从较大的margin外边距)
      两个块之间的距离为50px,发送了margin重叠。
      根据BFC布局规则第二条:
      Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    IFC简介:行级格式化上下文Inline Formatting Context

    IFC布局规则:
    ①在一个行内格式化上下文中,盒是一个接一个水平放置
    ②这些盒之间的水平margin,border和padding都有效
    ③盒可能以不同的方式竖直对齐:以它们的底部或者顶部对齐,或者以它们里面的文本的基线对齐
    ④行内块级元素之间默认留有间隙
    ⑤矩形区域包含着来自一行的盒子叫做line box,line box的宽度由浮动情况和它的包含块决定,高度由line-height的计算结果决定

    FFC全称:Flexible Formatting Context弹性盒格式化上下文

    CSS3引入了一种新的布局模型——flex布局。
    flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕,使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)

    GFC全称:Grids Formatting Context网格格式化上下文

    CSS3引入的一种新的布局模型——Grids网格布局,目前暂未推广使用,使用频率较低,简单了解即可。
    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
    Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

    文档流
    渲染规则:
    流实际上规定了元素怎么排放以及相互作用(之前讲的渲染规则)。
    在CSS中主要有三种流: normal flow(普通流,我们经常将的脱离,脱离的就是它)、floats浮动流、Absolute Posioning定位流(position不为static、relative)。

    脱离文档流

    脱离文档流
    将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
    需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

    展开全文
  • BFC和IFC

    2021-03-22 19:44:46
    在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种...IFC行内格式化上下文, 在行内格式化上下文中,框(box)一个接一个的水平排列,起点是包含块的顶部。水平方向上的 margin、bo

    在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。而普通流其实就是指BFC中的FC。


    BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域,或者说是在一定条件下的一种渲染规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也如此。

    IFC行内格式化上下文, 在行内格式化上下文中,框(box)一个接一个的水平排列,起点是包含块的顶部。水平方向上的 margin、border和padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。

    BFC规定了内部的Block Box如何布局。
    定位方案:

    1. 内部的Box会在垂直方向上一个接一个放置。
    2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
    3. 每个元素的margin box 的左边,与包含块border box的左边相接触。
    4. BFC的区域不会与float box重叠。
    5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
    6. 计算BFC的高度时,浮动元素也会参与计算。

    满足下列条件之一就可触发BFC
    1. 根元素,即html
    2. float的值不为none(默认)
    3. overflow的值不为visible(默认)
    4. display的值为inline-block、table-cell、table-caption
    5. position的值为absolute或fixed

    BFC的用处
    1、清除浮动
        如果子元素都是浮动的,受浮动影响,父元素的高度会塌陷。
        解决方案:为父元素加上overflow:hidden;使其形成BFC,根据BFC规则第六条,计算高度时就会计算float的元素的高度,达到清除浮动影响的效果。
    2、布局:自适应两栏布局
        如果不想要文字环绕图片的布局效果,而是想要图片文字各占两列,那么只需触发文字容器的BFC,根据规则第4、5条,BFC的区域是独立的,不会与页面其他元素相互影响,且不会与float元素重叠,因此就可以形成两列自适应布局。
    3、防止垂直margin合并
        我们知道,如果上下两个相邻元素都有margin,那么上面元素的margin-bottom和下面元素的margin-top会合并,只取两者中的最大值作为中间的距离,而不是相加。
        解决方法:为其中一个元素的外面包裹一层元素,并为这个外层元素设置overflow:hidden;使其形成BFC。
    根据BFC规则第五条,BFC内部是一个独立的容器,所以不会与外部相互影响,可以防止margin合并。

    展开全文
  • BFC IFC 总结记录

    2019-03-20 17:00:00
    引用参考:https://segmentfault.com/a/1190000017273573?utm_medium=referral&utm_source=tuicool ... BFC 定义 BFC(Block formatting context)直...
  • html/css--BFC IFC

    2020-11-29 19:33:32
    position不为relativestatic overflow为auto 、scroll、hidden display的值为table-cell、inline-block 能解决的问题 浮动元素令父元素高度塌陷的问题 可以给父元素添加 即可触发BFXC 解决自适应布局的问题 ...
  • BFC和IFC区别

    2021-06-28 11:13:16
    BFC块级格式化上下文https://blog.csdn.net/weixin_43765747/article/details/118002420 IFC内联格式化上下文 块容器盒中只有内联级盒子,每一行盒的高度由行盒内最高的inline-box...在BFC中只会包含块级元素,在IFC.
  • BFC和IFC理解

    2021-02-04 10:31:45
    分为:BFC和IFCBFC形成条件: 1.浮动元素(float除none以外的值) 2.定位元素(position(absolute/fixed)) 3.display(值为inline-block/table-cell/table-caption时) 4.overflow(值为hidden/auto/scro
  • bfc 和ifc

    2015-09-22 00:32:11
    BFC(block formatting context)“块级格式化上下文” 1.在bfc环境中所有元素都会按照垂直方向一个一个排列 2.相邻盒子在垂直方向上的margin值会重叠 3.内部盒子会以bfc的左边右边线接触,浮动也是...
  • 主要介绍了浅析CSS里的BFC和IFC的用法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS BFC IFC

    2020-03-29 22:45:59
    文章转自: 什么是BFC?看这一篇就够了 BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有...Box 是 CSS 布局的对象基本单位, 直观点来说,就是一个页面是由很...
  • BFCIFC、圣杯布局、双飞翼布局
  • 浅谈BFC和IFC

    2018-08-30 23:15:41
    先说说FC,FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。...BFC和IFC都是常见的FC。分别叫做Block Fomatting Context Inline Formatting Context。   BFC BFC(Block Formattin...
  • 浅析CSS中的BFC和IFC

    2019-09-15 22:13:51
    1. 为什么会有BFC和IFC 首先要先了解两个概念:Boxformatting context; Box:CSS渲染的时候是以Box作为渲染的基本单位。Box的类型由元素的类型displ...
  • 深入理解BFC和IFC

    2019-09-24 06:04:29
    1. 为什么会有BFC和IFC  首先要先了解两个概念:Boxformatting context;  Box:CSS渲染的时候是以Box作为渲染的基本单位。Box的类型由元素的类型display属性决定,box的类型分为block-level box inline...
  • BFCIFC

    2018-01-08 18:38:10
    BFCIFC BFCIFC的参与者  在普通流中的盒子会参与一种格式上下文,这个盒子可能是块盒也可能是行内盒,但不可能同时是块盒又是行内盒。块级盒参与块级格式上下文(BFC),行内级盒参与行级格式上下文(IFC)...
  • BFC并不是元素,而是元素带有的一些属性,因此上面元素是产生了BFC,而他们本身并不是BFCBFC规则 内部的Box会在垂直方向一个接一个的放置 Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box...
  • BFCIFC、GFC FFC

    2019-08-24 15:33:46
    BFC(Block formatting contexts):块级格式上下文 页面上的一个隔离的渲染区域,那么他是如何产生的呢?可以触发BFC的元素有float、position、overflow、display:table-cell...IFC(Inline formatting contexts)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,297
精华内容 918
关键字:

bfcifc和