CSS中的各种格式化上下文-FC(BFC)、IFC、GFC、FFC)
什么是FC?
FC是Formatting Context的缩写,中文名:格式化上下文。是 W3C在CSS2.1 规范中的一个概念。
FC是指页面中一篇渲染区域,渲染区域内使用的格式化上下文的渲染规则,决定了该区域以及其子元素如何定位。当然,使用同的渲染规则,也会对其他元素的起到相互关系的作用。
主要有哪些FC?
主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。
4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。
BFC
什么是BFC
Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
BFC的约束规则
- 内部的BOX会在垂直方向上一个接一个的放置;
- 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的俩个相邻的BOX的margin会发生重叠,与方向无关。)
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此。(这说明BFC中的子元素不会超出它的包含块,而position为absolute的元素可以超出它的包含块边界);
- BFC的区域不会与float的元素区域重叠;
- 计算BFC的高度时,浮动子元素也参与计算;
- 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有的特性
IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。
IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。
IFC的应用
水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
垂直居中:创建一个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)的更多相关文章
- CSS的两种格式化上下文:BFC和IFC
CSS的两种格式化上下文 文章包含很多个人理解,如果错误,欢迎指出~ 在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...
- BFC,IFC,GFC,FFC
FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. ...
- css 块级格式化上下文(BFC)
一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...
- CSS布局秘籍(1)-任督二脉BFC/IFC
01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...
- CSS中各种布局的背后(*FC)
CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...
- 详解块级格式化上下文(BFC)
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
- CSS 中的 BFC,IFC,GFC和FFC
原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...
- CSS中的视觉格式化模型
视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树 ...
- css3中的BFC,IFC,GFC和FFC(转载)
作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting C ...
- 跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC
跟着9张思维导图学习Javascript 学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...
随机推荐
- 你所不知道的 vscode,汇集历史版本中你可能不知道的新特性
壹 ❀ 引 vscode可以毫不夸张的说是大部分前端同学吃饭的工具(webstorm除外),随着时间的推移vscode其实也在不断推出了各种新功能新特性,但vscode并不会默认就实装这些新功能,我相 ...
- 【Azure 事件中心】Event Hub 无法连接,出现 Did not observe any item or terminal signal within 60000ms in 'flatMapMany' 的错误消息
问题描述 使用Java SDK连接Azure Event Hub,一直出现 java.util.concurrent.TimeoutException 异常, 消息为:java.util.concur ...
- ubuntu上升级cmake到3.16版本
本来cmake的旧版本是2.8.12.2,现在更新到3.16.0版本. 需要文件:cmake 3.16.0压缩包,在附件. 1. 查看cmake版本:cmake --version 2. 解压cm ...
- 基于python的数学建模---运输问题
代码 import pulp import numpy as np from pprint import pprint def transport_problem(costs, x_max, y_ma ...
- winform的TabContorl的TabPage动态添加滚动条
关键属性 AutoScrollMinSize private int minWidth = 800; private int minHeight = 600; List<Form> li ...
- Cacheable VS Non-Cacheable
1 基本概念 在嵌入式软件开发中,经常会碰到说某块内存是cache的,还是non-cache的,它们究竟是什么意思?分别用在什么场景?non-cache和cache的内存区域怎么配置?这篇博文将会围绕 ...
- 更改grub2背景图片
在/etc/grub/default这里面修改东西然后update-grub来间接修改/boot/grub/grub.cfg中的内容 1.将png图片放进/boot/grub/目录下 2.update ...
- 批量将多个相同Excel表格内容合并到一个Excel表格的sheet工作簿当中。
Sub Books2Sheets()Dim fd As FileDialog Set fd = Application.FileDialog(msoFileDialogFilePicker) Dim ...
- USB限流,短路保护芯片IC
USB口的输出电压一般是5V,在一些电源中,由于总电源5V是一个很大的总电源,再分别出很多路输出负载出来,例如5V10A,分成4个USB输出口,如果没加其他限流和保护的话,任意一个USB口的输出电流都 ...
- 跨机房ES同步实战
作者:谢泽华 背景 众所周知单个机房在出现不可抗拒的问题(如断电.断网等因素)时,会导致无法正常提供服务,会对业务造成潜在的损失.所以在协同办公领域,一种可以基于同城或异地多活机制的高可用设计,在保障 ...