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:/...
垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中. FFC 是自适应格式化上下文,display值为flex或者inline-flex的元素将会生成自适应容器,目前好像只有谷歌和火狐支持. Flex Box 由伸缩容器和伸缩项目组成.通过设置元素的 display 属性为 f...
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少safari和chrome还是OK的,毕竟这俩在移动端才是王道。 Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属...
比较常见的是 CSS2.1 规范中的 IFC(Inline Formatting Contexts)与 BFC(Block Formatting Contexts),至于后面两个,则是 CSS3 新增规范,GFC(GridLayout Formatting Contexts)以及 FFC(Flex Formatting Context)。 FC 是网页CSS视觉渲染的一部分,用于决定盒子模型的布局、其子元素将如何定位以及和其他元素的关系和相互作用。
我们知道元素有内联元素、块级元素、行内块级元素,在页面上渲染时它们的定位,排列方式等都有所不同,就是因为它们根据内部的格式化上下文进行不同的渲染,即 BFC 和 IFC。 后面css3 新增了 grid 布局以及 flex 布局,所以也迎来了 GFC、FFC。 BFC(Block formatting contexts):块级格式上下文 ...
主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。 4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。 BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规...
主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。 4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。 BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规...
我们知道元素有内联元素、块级元素、行内块级元素,在页面上渲染时它们的定位,排列方式等都有所不同,就是因为它们根据内部的格式化上下文进行不同的渲染,即 BFC 和 IFC。 后面css3 新增了 grid 布局以及 flex 布局,所以也迎来了 GFC、FFC。 BFC(Block formatting con...
说起KFC,大家都知道是肯德基 ,但面试官问你什么是BFC、IFC、GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些FC(Forrmatting Context)你都得知道,而且必须得做到像肯德基这样印象深刻。下面我将会带大家一起揭开这些FC的真面目,如果你已经了解...
FFC与BFC有点儿类似,但仍有以下几点区别: Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素 vertical-align 对 Flexbox 中的子元素 是没有效果的 float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!) ...