BFC的个人理解

最近学习了BFC,开始学习的时候,单纯看概念,有种云里雾里的感觉,字都认识,凑一起啥意思大致也知道,但是具体有什么用呢? 这个就有点迷迷糊糊的,经过老师的讲解,以及自己课后的代码实验与总结,就拨云见日了,在这里分享自己对BFC的一些理解. BFC的概念: BFC 即(Block Formatting Context)块级格式化上下文,指一个独立的块级渲染区域,只有块级盒子(box)参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. 与之对应的还有IFC.GFC.FFC. BFC

一:BFC是什么东东 了解BFC前先一了解一下Box和Formatting Context (1)B: BOX即盒子,页面的基本构成元素.分为 inline . block 和 run-in 三种类型的BOX (2)FC: Formatting Context是W3C的规范中的一种概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用.  常见的 Formatting Context 有 Block fomatting context (简

接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明: 名称 类型 说明 offset Number 打点的视频偏移时间,单位:秒 text String 打点的文本信息,默认UI会使用 isCustomized Boolean 是否使用默认UI,不使用设置为true 事件 Aliplayer提供两个事件:鼠标进入进度条上的打点和鼠标离开进度条上的

一.什么是BFC呢? 1. BFC 即 Block Formatting Contexts (块级格式化上下文) 自译:如果BFC的盒子相当于985,211的高校,普通的盒子就是普通的大学 二.BFC的触发条件有哪些? 1. 根元素(html标签就是一个BFC) 2. float的值不为none时 3. overflow的值不为visibility 4. display的值为 line-block/table-cell/table-caption/flex/inline-flex 5. posi

深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及

作者写的很详细,感谢分享.来源:http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,

什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列. BFC的运用 在w3c的规范中,除了上

块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定块盒子的布局.在定位体系(Positioning Scheme)中它属于常规流(Normal Flow). 浮动.绝对定位元素(position 为 absolute 或 fixed).行内块元素 display:inline-block.表格单元格display:table-cell.表格标题 display:table-caption 以及 overflow 属性值不为 visible

首先弄明白一个概念,上面是bfc? w3c是这样解释 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流. 说通俗一点就是: float的值不为none position的值不为static或者relative display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个 overflow的值不为visible <!DOCTY