第 20 题:请描述一下 BFC、IFC、GFC 和 FFC 的区别?
网上看了很多文章,只想说一句话:“真的啥都没看懂”。以下是我个人的理解,有不对的地方可以提出。
在描述他们之间的区别之前,我们首先要了解一下什么是 BFC、IFC、GFC、FFC?
- 我们知道元素有内联元素、块级元素、行内块级元素,在页面上渲染时它们的定位,排列方式等都有所不同,就是因为它们根据内部的格式化上下文进行不同的渲染,即 BFC 和 IFC。后面 CSS3 新增了 grid 布局以及 flex 布局,所以也迎来了 GFC、FFC
分割线--------------------------------------------------------------------
下方的内容在网上找,基本上都是差不多的
BFC(Block formatting contexts):块级格式上下文
页面上的一个隔离的渲染区域,那么他是如何产生的呢?可以触发 BFC 的元素有 float、position、overflow、display:table-cell/ inline-block/table-caption ;BFC 有什么作用呢?比如说实现多栏布局
IFC(Inline formatting contexts):内联格式上下文
IFC 的 line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的 padding/margin 影响)IFC 中的 line box 一般左右都贴紧整个 IFC,但是会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间,使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同
IFC 中时不可能有块级元素的,当插入块级元素时(如 p 中插入 div)会产生两个匿名块与 div 分隔开,即产生两个 IFC,每个 IFC 对外表现为块级元素,与 div 垂直排列。
那么 IFC 一般有什么用呢?
水平居中:当一个块要在环境中水平居中时,设置其为 inline-block 则会在外层产生 IFC,通过 text-align 则可以使其水平居中。
垂直居中:创建一个 IFC,用其中一个元素撑开父元素的高度,然后设置其 vertical-align:middle,其他行内元素则可以在此父元素下垂直居中
GFC(GrideLayout formatting contexts):网格布局格式化上下文
当为一个元素设置 display 值为 grid 的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。那么 GFC 有什么用呢,和 table 又有什么区别呢?首先同样是一个二维的表格,但 GridLayout 会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制
FFC(Flex formatting contexts):自适应格式上下文
display 值为 flex 或者 inline-flex 的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少 safari 和 chrome 还是 OK 的,毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局
#
文章的内容/灵感都从下方内容中借鉴
【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues
【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts
【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/
第 20 题:请描述一下 BFC、IFC、GFC 和 FFC 的区别?相关推荐
- css3中的BFC,IFC,GFC和FFC(转载)
作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What's FC? 一定不是KFC,FC的全称是:Formatting C ...
- css----BFC,IFC,GFC,FFC的区别
FC:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC ...
- BFC、IFC、GFC 和 FFC 的区别?
在描述他们之间的区别之前,我们首先要了解一下什么是 BFC.IFC.GFC.FFC? 我们知道元素有内联元素.块级元素.行内块级元素,在页面上渲染时它们的定位,排列方式等都有所不同,就是因为它们根据内 ...
- (37) BFC IFC GFC FFC概念
一.什么是FC? Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作 ...
- BFC/IFC/GFC/FFC分别是什么?
BFC
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
sessionStorage和localStorage有更多丰富易用的接口. sessionStorage和localStorage各自独立的存储空间. 与服务器交互: cookie 是网站为了标示用 ...
- 【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作
请描述 BFC(Block Formatting Context) 及其如何工作 小课堂[北京-WEB-A组] 分享人:要来点本子吗 大家好,我是IT修真院北京分院第35期的学员,一枚正直.纯洁.善良 ...
- 小乐乐与二段数(2019哈理工新生赛第20题)
链接:2019哈理工新生赛题解 2019哈理工新生赛第20题 T题: 链接:https://ac.nowcoder.com/acm/contest/1877/T 来源:牛客网 题目描述 小乐乐从老师口 ...
- NOI题库答案(1.5 编程基础之循环控制)(1—20题)
NOI网址:http://noi.openjudge.cn/ 目录 01:求平均年龄 02:财务管理 03:均值 04:求整数的和与均值 05:最高的分数 06:整数序列的元素最大跨度值 07:奥运奖 ...
最新文章
- C 语言编程利器 之CLion
- 关于事务的传播特性和隔离级别的问题
- wind mysql日志_Windows下的Mysql日志操作
- 《用Python进行自然语言处理》第6章 学习分类文本
- python3入门教程-Python3 入门教程 简单但比较不错
- NET Core入门笔记
- 第二十八期:Notepad++ 新 Logo 出炉,官网全新改版采用自适应设计
- m.2接口和nvme区别_m.2 nvme和m.2有区别吗?
- python3多线程编程_Python 3多线程编程学习笔记-基础篇
- desktop docker 无法卸载_在docker-for-desktop OSX上删除kubernetes集群
- python 代码_如何让Python代码加速运行?
- ROS学习笔记五:理解ROS topics
- 排序算法 - 快速排序(java)
- PyTorch 之 Checkpoint 机制解析
- Linux 压缩文件夹tar/zip
- NIOS II使用经验
- 人脸识别+表情识别系统
- 【Day6.2】现金所剩无几,机智想办法去机场
- 用Python蹭别人家图片接口,做一个【免费图床】吧
- 如何申请试用MaxCompute 2.0
热门文章
- 计算机图形学(三)——画一个矩形
- android8.0应用图标适配调整_Android应用图标微技巧,8.0系统中应用图标的适配
- maya导出obj分组_maya2017怎么导入obj序列?
- McObject新版eXtremeDB v.8.0在E8存储上运行STAC基准测试创造了多个记录
- 一次ES性能优化,我发现了搞大数据的真相……
- c# picturebox 图像拖拽和缩放
- 看来不止一次的电影(电影经典给你好看准备下载下来,免得以后收费了)
- win10下安装cuda和cudnn
- 司马迁的智慧—东方最早的经济学综合论文《货殖列传》
- 【笔记】最后14堂星期二的课