CSS中的BFC、IFC、GFC和FFC是布局模型中的概念,用于描述元素在文档流中的布局行为。它们分别代表块级格式化上下文(Block Formatting Context)、内联级格式化上下文(Inline Formatting Context)、网格格式化上下文(Grid Formatting Context)和自适应格式化上下文(Flexbox Formatting Context)。 块级格式化上下文(BFC) 块级格式化...
FC(Formatting Context)格式化内容,常见的FC有BFC、IFC、FFC、GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出的概念,其实就是定义了一套页面渲染的规则,决定了盒子以什么样的方式渲染从而占据什么样的位置区域,本文只是简单的学习笔记以供参考。 想要弄懂FC,首先得弄清楚盒子模型,常见...
IFC中的 line box 一般左右边都贴紧其包含块,但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间,使得 line box 宽度缩短。 IFC 中的 line box 高度由 CSS 行高计算规则来确定,同个 IFC 下的多个 line box 高度可能会不同(比如一行包含了较高的图片,而另一行只有文本) 当inline-le...
IFC中的“line box”一般左右边贴紧其包含块,但float元素会优先排列。 IFC中的“line box”高度由 CSS 行高计算规则来确定,同个IFC下的多个line box高度可能会不同。 当inline-level boxes的总宽度少于包含它们的line box时,其水平渲染规则由 text-align 属性值来决定。 当一个“inline box”超过父元素的宽度...
主要的格式化上下文渲染规则一共有4种,分别是BFC(块级格式化上下文)、IFC(行内格式化上下文)、GFC(网格布局格式化上下文)、FFC(自适应格式化上下文)。 4种格式化上下文渲染规则,也是体现了CSS中不同的渲染规则。 BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规...
领项目、领笔记资料、看简历:关注威 公众号:【小鹿线前端】- 点击【领取资料】即可!, 视频播放量 392、弹幕量 1、点赞数 3、投硬币枚数 0、收藏人数 18、转发人数 0, 视频作者 vue实战, 作者简介 关注威 公众号:搜【小鹿线前端】- 点击【领取资料】即可!,相关
ifc:内联格式化上下文 https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.htmlgfc:网格格式化上下文 display: gridffc:弹性格式化上下文 display: flex 参考链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsinghttps://zhuanlan.zhihu.com/p/343613321https:/...
介绍下 BFC、IFC、GFC 和 FFC? BFC(Block Formatting Contexts)块级格式化上下文 什么是 BFC? BFC全称:Block Formatting Context, 名为块级格式化上下文。 W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个...
IFC(inline Formatting Context)叫做“行级格式化上下” 规则如下: 1.内部的盒子会在水平方向,一个个地放置; 2.IFC的高度,由里面最高盒子的高度决定; 3.当一行不够放置的时候会自动切换到下一行; 很多时候,上下间距不生效可以使用IFC来解释 .warp { border: 1px solid red; display: inline-block; } ...