likes
comments
collection
share

来聊聊 CSS 中的 BFC、IFC、ZFC、GFC

作者站长头像
站长
· 阅读数 13

大噶好，我系阳树，话不多说，让我们开始今天的正题

老生常谈：BFC(Block Formatting Context，块级格式化上下文）

  1. 概念：BFC 是一个完全独立的空间，让空间里的子元素不会影响到外面的布局。
  2. 如何触发 BFC
    • overflow: hidden
    • position: absolute
    • position: fixed
    • display: flex
    • display: inline-block
  3. BFC 的规则
    1. BFC 是一个块级元素，块级元素会在垂直方向上一个接一个的排列。
    2. BFC 就是页面中的一个隔离的独立容器，容器里的元素不会影响到容器外的元素。
    3. 垂直方向的距离由margin决定，属于同一个 BFC 的两个相邻标签的外边距会发生重叠。
    4. 计算 BFC 的时候，浮动元素也参与其中。
  4. BFC 解决的问题：
    1. 使用 Float 脱离文档流，高度塌陷 因为子元素使用了 float ，导致父元素的高度没有被撑开，可以给父元素设置触发 BFC 的相关属性。
    2. margin 边距重叠 将两个元素都设置成 BFC
    3. 两栏布局
    4. 左侧元素设置 float: left 时，右侧元素设置宽度会被覆盖掉，可以将右侧元素设置成 BFC

IFC（Inline Formatting Context）

  1. IFC（Inline Formatting Context）是CSS中的一个概念，它定义了一种内联元素的布局环境。IFC主要用于控制行内元素的排布和对齐方式。 IFC中的元素会按照从左到右，从上到下的顺序排列，并且它们的尺寸和位置受到父容器和兄弟元素的约束。

  2. IFC的一些主要特点包括：

    1. 内部元素按从左到右的顺序排列：IFC中的内联元素会按从左到右的顺序排列，如果空间不够就会自动换行，因此我们永远不需要手动在行尾添加“换行符”。
    2. 尺寸由内部元素的内容决定：IFC中的元素尺寸由它们的内容所决定，而不是由容器的尺寸所决定。这意味着，在IFC中，我们无法用设置宽度的方式来控制内联元素的大小。
    3. 对齐方式由父容器决定：IFC内部元素的对齐方式受到父容器的控制。我们可以使用text-align属性来设置IFC内部元素的水平对齐方式，例如设置为center可以使内部元素水平居中对齐；也可以使用vertical-align属性来设置IFC内部元素的垂直对齐方式，例如设置为middle可以使内部元素垂直居中对齐。

  3. IFC适用的场景包括：

    1. 对于一些包含多个小的文字和图片的块，在需要进行对齐和布局的时候，可以使用IFC来控制它们的位置和对齐方式。
    2. IFC常用作文本的排版环境，例如在实现栏目列表、文章标题、文章正文等方面常用。
    3. 在一些富文本编辑器开发中，我们可以使用IFC来控制编辑器中的文字格式，例如设置字号、字体、颜色等。

ZFC（Z-Index Formatting Context）

  1. ZFC（Z-Index Formatting Context）是CSS中的一个概念，它可以控制元素的层叠关系。
  2. ZFC主要用于解决元素层叠时出现的问题，如交叉覆盖等。 在ZFC中，元素的层叠关系是按照z-index属性的值来确定的。值较大的元素会覆盖值较小的元素，从而控制元素的层叠顺序。
  3. ZFC的一些主要特点包括：
    1. 层叠关系是与容器有关的：ZFC主要是通过设置容器的position属性或display属性（如设置为flex或grid）来定义的。当容器的z-index属性被设置时，其内部所有元素的层叠顺序都会相应地受到影响。
    2. 前后顺序类似于文档流：ZFC中的元素按照它们在文档流中出现的顺序而确定层叠顺序。就像文档流中后面的元素会覆盖前面的元素一样，当两个元素的z-index属性相同时，HTML文档中后面出现的元素会覆盖前面的元素。
    3. 包含块是指定的父元素：在ZFC中，一个元素的包含块是指定的父元素。因此，如果父元素的层叠顺序被修改，那么其子元素的层叠顺序也会被相应地修改。
  4. ZFC适用的场景包括：
    1. 在设计具有复杂的层叠关系的页面时，可以使用ZFC来控制元素的层叠顺序，以避免元素之间出现冲突。
    2. 在制作交互式动画或添加特效时，可以使用ZFC来控制元素之间的关系，例如在悬停状态下出现的下拉菜单等。
    3. 在一些Web游戏和其他可视化应用程序中，较新的HTML5和CSS3技术和ZFC概念的结合使用可以大大提高性能和用户体验。

GFC（Grid Formatting Context）

GFC（Grid Formatting Context）是CSS Grid布局中的概念，用于控制网格元素的排列方式、尺寸和位置。 在GFC中，网格元素通过定义网格容器（Grid Container）和网格项（Grid Item）来实现布局。

网格容器使用display: grid属性来声明，并定义了一个基本的网格结构，可以通过grid-template-columns和grid-template-rows属性来定义行和列的大小和数量。

网格项使用grid-column-start、grid-column-end、grid-row-start、grid-row-end等属性来指定其在网格中的位置，其中grid-column-start、grid-column-end用于指定网格项的列范围，grid-row-start、grid-row-end用于指定网格项的行范围。

也可以使用grid-column和grid-row属性来简化这些属性的设置。 网格元素的大小可以通过grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-template-columns和grid-template-rows等属性来设置。

在GFC中，网格元素的大小可以是绝对大小（如像素）或相对大小（如百分比），也可以使用fr单位来定义自适应大小。

在GFC中，网格项可以跨越多个行和列，也可以使用grid-area属性来简化网格项的设置。同时，GFC也提供了一些强大的对齐和分布方式，如justify-content、align-content、justify-items、align-items等属性，用于控制网格元素的对齐和间距。

总的来说，GFC是一个非常灵活的布局方式，可以实现各种复杂的布局需求，相较于传统的布局方式，GFC的代码量更少、可读性更强，而且支持响应式布局，可以适应不同的屏幕尺寸和设备类型。