空白字符处理:IFC 会合并多个空格字符为一个空格。 GFC (Grid Formatting Context) 网格格式化上下文: 作用:GFC 是由display: grid或display: inline-grid创建的格式化上下文,用于网格布局。在 GFC 中,元素会按照网格容器定义的网格线排列。 触发条件:display属性值为grid或inline-grid。 FFC (Flex Formatting Context)...
css中的IFC IFC(Inline Formatting Contexts) 意为“内联格式化上下文”,IFC中,盒子依次水平放置,从包含块的顶部开始。 IFC布局规则: 1.框会从包含块的顶部开始,一个接一个地水平摆放。 2.摆放这些框的时候,它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向 上,这些框可能会以...
垂直居中可通过创建IFC并使用垂直对齐属性实现。 GFC(网格布局格式化上下文):设置display为grid的元素获得独立渲染区域,通过定义网格定义行和列属性,为网格项目定义行和列,实现精确的位置和空间控制。网格布局提供了更丰富的控制属性,相比于传统的表格,网格布局更灵活,支持更精细的渲染语义和控制。 FFC(自适应格式上下文)...
FFC FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少safari和chrome还是OK的,毕竟这俩在移动端才是王道。 Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 displa...
ifc：内联格式化上下文 https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.htmlgfc：网格格式化上下文 display: gridffc：弹性格式化上下文 display: flex 参考链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsinghttps://zhuanlan.zhihu.com/p/343613321https:/...
我们知道元素有内联元素、块级元素、行内块级元素,在页面上渲染时它们的定位,排列方式等都有所不同,就是因为它们根据内部的格式化上下文进行不同的渲染,即 BFC 和 IFC。 后面css3 新增了 grid 布局以及 flex 布局,所以也迎来了 GFC、FFC。 BFC(Block formatting con...
比较常见的是 CSS2.1 规范中的 IFC(Inline Formatting Contexts)与 BFC(Block Formatting Contexts),至于后面两个,则是 CSS3 新增规范,GFC(GridLayout Formatting Contexts)以及 FFC(Flex Formatting Context)。 FC 是网页CSS视觉渲染的一部分,用于决定盒子模型的布局、其子元素将如何定位以及和其他元素的关系和相互作...
主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。 4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。 BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规...
CSS中的BFC、IFC、GFC和FFC是布局模型中的概念,用于描述元素在文档流中的布局行为。它们分别代表块级格式化上下文(Block Formatting Context)、内联级格式化上下文(Inline Formatting Context)、网格格式化上下文(Grid Formatting Context)和自适应格式化上下文(Flexbox Formatting Context)。
常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文)。 其次还有:GFC(GridLayout Formatting Context | 网格布局格式化上下文)、FFC(Flex Formatting Context | 自适应格式化上下文)。 参与者