GFC的应用范式和flex有点像,以后我们专门介绍下此种布局方式(bootstrap css类库 里面模拟实现了网格布局),这里我们不展开叙述,我们只需知道和FFC一样,GFC也定义了特殊的渲染规则,也属于普通流的一种。
主要的格式化上下文渲染规则一共有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)。 块级格式化上下文(BFC) 块级格式化...
领项目、领笔记资料、看简历:关注威 公众号:【小鹿线前端】- 点击【领取资料】即可!, 视频播放量 392、弹幕量 1、点赞数 3、投硬币枚数 0、收藏人数 18、转发人数 0, 视频作者 vue实战, 作者简介 关注威 公众号:搜【小鹿线前端】- 点击【领取资料】即可!,相关
重拾BFC、IFC、GFC、FFC 温故知新,巩固基础 从FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,及和其他元素的关系和相互作用。 常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(...
说起KFC,大家都知道是肯德基 ,但面试官问你什么是BFC、IFC、GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些FC(Forrmatting Context)你都得知道,而且必须得做到像肯德基这样印象深刻。下面我将会带大家一起揭开这些FC的真面目,如果你已经了解...
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、GFC 和 FFC? BFC(Block Formatting Contexts)块级格式化上下文 什么是 BFC? BFC全称:Block Formatting Context, 名为块级格式化上下文。 W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个...
介绍下 BFC、IFC、GFC 和 FFC BFC(Block formatting contexts) 块级格式上下文页面上的一个隔离的渲染区域,那么他是如何产生的呢?可以 触发 BFC 的元素有 float、position、overflow、display:table-cell/ inline-block/table-caption ; BFC 有什么作用呢?比如说实现多栏布局...
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....