什么是FC?

FC是Formatting Context的缩写,中文名:格式化上下文。是 W3C在CSS2.1 规范中的一个概念。

FC是指页面中一篇渲染区域,渲染区域内使用的格式化上下文的渲染规则,决定了该区域以及其子元素如何定位。当然,使用同的渲染规则,也会对其他元素的起到相互关系的作用。

主要有哪些FC?

主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。
4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。

BFC

什么是BFC

Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。

BFC的约束规则

  1. 内部的BOX会在垂直方向上一个接一个的放置;
  2. 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的俩个相邻的BOX的margin会发生重叠,与方向无关。)
  3. 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此。(这说明BFC中的子元素不会超出它的包含块,而position为absolute的元素可以超出它的包含块边界);
  4. BFC的区域不会与float的元素区域重叠;
  5. 计算BFC的高度时,浮动子元素也参与计算;
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;

BFC的应用

  • 防止margin发生重叠
  • 防止发生因浮动导致的高度塌陷

怎么生成BFC

  • float的值不为none;
  • overflow的值不为visible;
  • display的值为inline-block、table-cell、table-caption;
  • position的值为absolute或fixed;

display:table也认为可以生成BFC?其实是在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。

IFC

什么是IFC

IFC(Inline Formatting Contexts)直译为"行内格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)

IFC有的特性

  1. IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。

  2. IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。

IFC的应用

  1. 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。

  2. 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

GFC将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了GFC之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container)。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

FFC与BFC的区别

FFC与BFC有点儿类似,但仍有以下几点区别:

  • Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素

  • vertical-align 对 Flexbox 中的子元素 是没有效果的

  • float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox 是有效果的!)

  • 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素

  • Flexbox 下的子元素不会继承父级容器的宽

CSS中的各种格式化上下文-FC(BFC)、IFC、GFC、FFC)的更多相关文章

  1. CSS的两种格式化上下文:BFC和IFC

    CSS的两种格式化上下文   文章包含很多个人理解,如果错误,欢迎指出~   在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...

  2. BFC,IFC,GFC,FFC

    FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. ...

  3. css 块级格式化上下文(BFC)

    一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...

  4. CSS布局秘籍(1)-任督二脉BFC/IFC

    01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...

  5. CSS中各种布局的背后(*FC)

    CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...

  6. 详解块级格式化上下文(BFC)

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

  7. CSS 中的 BFC,IFC,GFC和FFC

    原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...

  8. CSS中的视觉格式化模型

    视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树 ...

  9. css3中的BFC,IFC,GFC和FFC(转载)

    作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html   What‘s FC? 一定不是KFC,FC的全称是:Formatting C ...

  10. 跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC

    跟着9张思维导图学习Javascript   学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...

随机推荐

  1. 【单元测试】Junit 4(二)--eclipse配置Junit+Junit基础注解

    1.0 前言 ​ 前面我们介绍了白盒测试方法,后面我们来介绍一下Junit 4,使用的是eclipse(用IDEA的小伙伴可以撤了) 1.1 配置Junit 4 1.1.1 安装包 我们需要三个jar ...

  2. FHQ Treap 详解

    鲜花 一些鲜花放在前面,平衡树学了很久,但是每学一遍都忘,原因就在于我只能 70% 理解 + 30% 背板子,所以每次都忘.这次我采取了截然不同的策略,自己按照自己的理解打一遍,大获成功(?),大概打 ...

  3. 【JAVA】详解在JAVA中int与Integer的区别以及背后的原因。

    区别 首先我们要明确,这两点之间有什么区别? 主要有以下几点: 数据类型不同:int是基础数据类型,而 Integer是包装数据类型: 默认值不同:int的默认值是 0,而 Integer的默认值是 ...

  4. java环境改完版本后无效

    把C盘program files和X86两个文件夹中的Common Files中的Oracle文件夹删掉 这是jdk安装时自动生成的两个文件夹,记录了jdk的版本和路径,即使你的jdk安装路径不在C盘 ...

  5. 解决Linux使用deepin-wine跑qq,tim打不开文件所在文件夹

    前言 使用deepin-wine 跑qq,发现一个小bug 这里点击打开文件夹是没有效果的,包括在 tim 上也是这样 问题原因 出现这个问题是因为 deepin-wine 跑的 QQ,Tim 打开文 ...

  6. sql注入的一丢丢

  7. 【小项目】微信定时推送天气预报Github项目使用及原理介绍-包含cron、天气预报、常用api

    一.资料链接 1.github地址 https://github.com/qq1534774766/wx-push 2.教程地址 https://blog.csdn.net/qq15347747/ar ...

  8. 【论文解读】NIPS 2021-HSWA: Hierarchical Semantic-Visual Adaption for Zero-Shot Learning.(基于层次适应的零样本学习)

    作者:陈使明 华中科技大学

  9. 【Hive】概念、安装、数据类型、DDL、DML操作、查询操作、函数、压缩存储、分区分桶、实战Top-N、调优(fetch抓取)、执行计划

    一.概念 1.介绍 基于Hadoop的数据仓库工具,将结构化数据映射为一张表,可以通过类SQL方式查询 本质:将HQL转换成MapReduce程序 Hive中具有HQL对应的MapReduce模板 存 ...

  10. mysql报错:【系统出错。发生系统错误 1067。进程意外终止。】解决

    目录 问题描述 错误排查 1.检查3306端口是否被占用 2.使用window事件查看器 总结 问题描述 使用管理员cmd,任务管理器均无法启动mysql. 报错提示信息:系统出错.发生系统错误 10 ...