BFC、IFC、GFC 和 FFC 的区别?web前端开发关注共 1723字,需浏览 4分钟 ·2021-08-20 19:09 在描述他们之间的区别之前,我们首先要了解一下什么是 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 定义了伸缩容器内伸缩项目该如何布局。感谢阅读。学习更多技能请点击下方公众号 浏览 9点赞 评论 收藏 分享 手机扫一扫分享分享 举报 评论图片表情视频评价全部评论推荐 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC前端下午茶0BFC 的形成和作用SegmentFault0管理和人力资源的区别?特别好的问题!想得非常深了!和你交流一下我目前的看法。 1. 管理的定义很多,但是核心都是“有意识地协调两个及以上人行为的活动”,所以管理的本质是整合、协调他人来完成共同目标,我老师喜欢概括为“用人办事”。 2. 人力资源管理是一项专门的职能,与管理相同的是:都强调如何使用人力资源。 3. 人力资源管理与管理的差别在于,前者更强调如何对人力资源进行价值评价和价值回报,后者更强调人力资源的使用,强调共同目标的达成。Python2和Python3的区别Python日志0HTTP 和 HTTPS 的区别愿天堂没有BUG0crm和scrm的区别SCRM全称:social crm,社会化客户关系管理; CRM之父”的Paul Greenberg写完他的CRM经典著作第三版之后,他自己也不得不食言重新写作第四版。原因很简单,范式的改变,让Social CRM(以下简称SCRM)走上了舞台。 传统CRM客户关系管理是一种通过系统和技术手段实现的服务和商业策略,目的是提高客户在与企业交互时的体验。那么,是什么催化了CRM的社会化趋势呢?随着社会化媒体的诞生、发展,越来越多的消费者聚集在社会化媒体中,企业品牌的客户管理也随之发生了改变。 CRM 传统CRM的重点是收集和管理静态的客户资料,如过去的购买信息,联系记录和客户属性信息。传统CRM是企业主导的,属于内向型的,企业注重:before和::before的区别Front小思0IQueryable 和 IEnumerable 的区别dotNET全栈开发0IOC和DI的区别Java技术精选0SCRM和CRM的区别1.可以触达客户(随时互动,加深印象); 2.可以做到客户的全生命周期(LT)的管理; 3.企业微信是承接客户的最佳载体,和客户建立社交关系; 4.丰富的标签能力,精准的客户画像,是良好客户关系的前提,传统CRM信息缺失; 5.将客户在线化,形成数字化客户资产,可以智能统计户关系管理千人千面” 17.SCRM,也可以称为营销CRM; 18.更加以客户为中心; 19. SCRM的S,可以有四层含义:Social社交,Stack全栈,Smart智能,Simple简单。和分析客情; 6.数字化,可以精准洞察客户需求,销售可以精准捕捉商机; 7.丰富的功能模块,可以提升销售的工作效率,提升转化效率。 8.无需多平台切换,点赞 评论 收藏 分享 手机扫一扫分享分享 举报