最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

世界速读:CSS中的BFC、IFC、GFC、FFC

来源:博客园


(资料图)

CSS中的BFC、IFC、GFC和FFC是布局模型中的概念,用于描述元素在文档流中的布局行为。它们分别代表块级格式化上下文(Block Formatting Context)、内联级格式化上下文(Inline Formatting Context)、网格格式化上下文(Grid Formatting Context)和自适应格式化上下文(Flexbox Formatting Context)。

块级格式化上下文(BFC)

块级格式化上下文是一个独立的渲染区域,内部元素的布局不会影响外部元素。在BFC中,盒子从顶端开始排列,垂直方向上一个接一个,两个框之间的垂直距离由margin决定。在一个BFC中,两个相邻的Box的margin会发生重叠。

BFC的创建方式包括:

  1. float不为none
  2. position为absolute或fixed
  3. display为inline-block、table-cell、table-caption
  4. overflow不为visible

BFC常用于解决margin重叠的问题,可以通过将元素设为BFC来避免margin重叠。BFC还可以清除浮动,将一个容器设为BFC可以防止其内部的浮动元素对外部元素造成影响。另外,BFC还可以实现两栏布局等效果。

内联级格式化上下文(IFC)

内联级格式化上下文是一行内元素的渲染区域,内部元素的布局受到相邻元素的影响。在IFC中,盒子按照从左到右的顺序排列,可以通过vertical-align属性来垂直对齐。IFC中的line box高度由其行内盒子中最高的计算值而定。

IFC的创建方式包括:display为inline、inline-block、inline-table或者table-cell。

IFC常用于实现行内元素的垂直对齐,可以通过将一组行内元素放置在一个IFC内来实现垂直对齐的效果。IFC还可以实现一些特殊的布局效果,例如等高布局。

网格格式化上下文(GFC)

网格格式化上下文是CSS Grid Layout中的一个概念,规定了内部网格元素的布局方式,且与外部毫不相干。网格布局通过将容器划分为网格行和网格列来定义布局,容器中的每个子元素占据一个或多个网格,用于控制网格容器中网格项的布局方式。

自适应格式化上下文(FFC)

自适应格式化上下文是一个独立的渲染区域,只有Flexbox参与,它规定了内部Flexbox元素的布局方式,且与外部毫不相干。用于控制flex容器中flex项的布局方式,FFC内的元素会按照一定规则自适应排列。

FFC是Flexbox布局中的一个概念,用于控制flex容器中flex项的布局方式。通过FFC,可以实现各种各样的弹性布局效果,例如水平居中、垂直居中、等间距布局等等。

作者:施主来了链接:https://juejin.cn/post/7205016004924375077来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

关键词: 方式包括 毫不相干 可以实现