css中的BFC、IFC、GFC、FFC
BFC(块级格式上下文)在面试的时候,关于对BFC的理解是一非常重点的内容,就来看看吧
BFC (Block Formatting Contexts )就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响
创建 BFC 的方式:
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC 主要作用:
可以包含浮动元素(清除浮动)
防止同一 BFC 容器中的相邻元素间的外边距重叠问题(毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠),可以将元素放在不同的 BFC 容器中
1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
2. 浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
3. 创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠
4. 元素自身的margin-bottom和margin-top相邻时也会折叠
- BFC 可以阻止元素被浮动元素覆盖
- 自适应两栏布局
IFC(内联格式上下文)
IFC(Inline formatting contexts)规定元素在同一行的水平和垂直对齐方式的,可以在同一行排列(inline,inline-block,float:left,right).
IFC中是不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。
作用:
水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
GFC(网格布局格式化上下文)
GFC(GrideLayout formatting contexts)当为一个元素设置为display:grid的时候,此元素将获得一个独立的渲染区域,可以在网格容器上定义网格行和列,为每一个网格定义位置和空间
作用:
GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。
FFC(自适应格式上下文)
FFC(Flex formatting contexts)相当于一个自适应容器(flex container)并由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。
作用:Flexbox 定义了伸缩容器内伸缩项目该如何布局。
css中的BFC、IFC、GFC、FFC相关推荐
- css3中的BFC,IFC,GFC和FFC(转载)
作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What's FC? 一定不是KFC,FC的全称是:Formatting C ...
- (37) BFC IFC GFC FFC概念
一.什么是FC? Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作 ...
- BFC/IFC/GFC/FFC分别是什么?
BFC
- css中的BFC模型
CSS中的BFC模型 1.BFC是什么 BFC,全称为Block formattingcontext,译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level ...
- CSS中的BFC是什么?怎么用?
文章目录 一.什么是BFC 二.如何创建一个BFC 三.BFC有什么特点 四.BFC有什么用 1.解决外边距折叠问题 2.制作两栏布局 3.清除元素内部的浮动 五.参考资料 一.什么是BFC 官方定义 ...
- CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总 简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
- CSS中的BFC机制
1 什么是BFC 块格式化上下文BFC(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域 ...
- CSS——FC(BFC/IFC/FFC/GFC)超详细版+原理案例分析
文章目录 一.Box 二.包含块 2.1 确定一个元素的包含块 2.2 EXAMPLE 三.FC(Formatting Context) 四.BFC 1. BFC的形成条件 2. BFC的布局规则 3 ...
- 学习CSS中的BFC
定义 BFC全称为block formatting context,意为块级格式化上下文,是Web页面中盒模型布局的css渲染模式. 可能上面的解释看了有点懵逼,通俗的说BFC指的的是一块区域的布局, ...
最新文章
- TJA1050只能RX不能TX
- php结尾的链接_优化 PHP 代码建议(结尾有彩蛋)
- 20220209-CTF-MISC-BUUCTF-修改图片宽高--ARCHPR工具的使用
- android如何删除项目,AndroidStudio中怎样删除项目
- 如何在不使用try语句的情况下查看文件是否存在
- Visual Studio中的第一个Django-Python应用程序
- 你关注什么,输出什么
- ADFS3.0 Customizing the AD FS Sign-in Pages
- html修改访问量txt,哪位大佬帮我改一下JS谢谢,txt改html网页直接显示的,感激不尽,现在的源码只能看......
- zbbz插件使用教程_CAD坐标自动标注zbbz插件非常实用(附压缩包及安装步骤)
- Hash表的时间复杂度为什么是O(1)?
- CBv92_GSHI 使用技巧、电脑输CBC码、金手指分区数据复制和备份
- file-saver blob前端导出excel文件
- 微信网址遮罩引导法升级版,微信自动跳转默认浏览器打开HTML
- Slack桌面3.0迁移到BrowserView
- linux 添加pv失败,linux上创建PV/VG/LV
- 【JY】推开土木工程振型求解之兰索斯法(Lanczos法)的大门
- 微信浏览器去除底部导航栏
- python实现键盘监听
- 【小白的CFD之旅】07 CFD常识