文章目录
一、FC是什么?
FC 全称 Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
二、格式化上下文几种类型
1.BFC(Block Formatting Contexts)
直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。
产生方式: float的值不为none;overflow的值不为visible; position的值不为relative和static;display的值为table-cell, table-caption, inline-block中的任何一个。
作用:外边距避免重叠、多栏布局、 结合块级别元素浮动,里面的元素则是在一个相对隔离的环境里运行。
2.IFC(Inline Formatting Contexts)
IFC(Inline Formatting Contexts)直译为"内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响),IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。
产生方式及作用:
水平居中,当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中;
垂直居中,创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
3.GFC(GridLayout Formatting Contexts)
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。
产生方式:display: grid;
作用:会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。
4.FFC(Flex Formatting Contexts)
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。
产生方式:display: flex / inline-flex;
作用:定义了伸缩容器内伸缩项目该如何布局。