静态补充CSS-BFC、IFC、FFC、GFC 查看原文 深入理解 BFC、IFC、GFC、FFC 1、定义BFC全称是blockformattingcontext,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域。IFC全称是inlineformattingcontext,也就是内联格式化上下文,是用于布局内联元素盒子的一块渲染区域。GFC全称是gridLayoutformattingcontext,也就是...
常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文)。 其次还有:GFC(GridLayout Formatting Context | 网格布局格式化上下文)、FFC(Flex Formatting Context | 自适应格式化上下文)。 参与者 一个页面由很多个盒子组成,在普通流中的盒子会参与一种格式化...
主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。 4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。 BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规...
GFC的应用范式和flex有点像,以后我们专门介绍下此种布局方式(bootstrap css类库 里面模拟实现了网格布局),这里我们不展开叙述,我们只需知道和FFC一样,GFC也定义了特殊的渲染规则,也属于普通流的一种。
FC(Formatting Context)格式化内容,常见的FC有BFC、IFC、FFC、GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出的概念,其实就是定义了一套页面渲染的规则,决定了盒子以什么样的方式渲染从而占据什么样的位置区域,本文只是简单的学习笔记以供参考。
CSS之FFC/GFC FFC FFC全称“Flex Formatting Contexts”翻译过来就是“弹性格式化上下文”。 FFC产生条件 display属性值设置为“flex”或“inline-flex”的容器。 FFC布局规则 FFC的布局规则与在CSS中有详细定义,关于FFC是如何布局的,看阮一峰的这篇文章即可:http://www.ruanyifeng.com/blog/2015/07/flex-grammar....
比较常见的是 CSS2.1 规范中的 IFC(Inline Formatting Contexts)与 BFC(Block Formatting Contexts),至于后面两个,则是 CSS3 新增规范,GFC(GridLayout Formatting Contexts)以及 FFC(Flex Formatting Context)。 FC 是网页CSS视觉渲染的一部分,用于决定盒子模型的布局、其子元素将如何定位以及和其他元素的关系和相互作...
领项目、领笔记资料、看简历:关注威 公众号:【小鹿线前端】- 点击【领取资料】即可!, 视频播放量 392、弹幕量 1、点赞数 3、投硬币枚数 0、收藏人数 18、转发人数 0, 视频作者 vue实战, 作者简介 关注威 公众号:搜【小鹿线前端】- 点击【领取资料】即可!,相关
几个概念,与相关需要挖掘细节的地方。另外再来几个布局的实例。 格式化上下文 和 盒子 算是 CSS 里最细节的概念了。 CSS2.1 规范中的 IFC(Inline Formatting Contexts)与 BFC(Block Formatting Contexts) CSS3 新增规范,GFC(GridLayout Formatting Contexts)以及 FFC(Flex Formatting Context)。
介绍下 BFC、IFC、GFC 和 FFC BFC(Block formatting contexts) 块级格式上下文页面上的一个隔离的渲染区域,那么他是如何产生的呢?可以 触发 BFC 的元素有 float、position、overflow、display:table-cell/ inline-block/table-caption ; BFC 有什么作用呢?比如说实现多栏布局...