最近学习了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 (简…

一.什么是BFC? BFC(block  formatting context):简单来说它就是一种属性,这种属性会影响元素与元素之间的位置.间距 二.形成BFC的条件 1.float:给元素添加浮动(属性值为left.right,但none除外) 2.position:给元素添加定位(属性值为absolute或fixed) 3.display:给元素添加display属性(属性值为 inline-blocks.table-cells或table-captions) 4.overflow:给元素…

BFC是Block Formatting Context (块级格式化上下文)的缩写,是一个独立的渲染区域,这个东西的存在是为了隔绝一些内部子元素对外部元素的影响. 例如: 我们用overflow:hidden来清除浮动,就是父元素生成了BFC,从而隔绝了内部子元素浮动对外部其他元算的影响,从而达到清理浮动的功能.…

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

什么是BFC? BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域.简单的来说,它就是一种会影响元素与元素之间的位置.间距的属性. BFC 的特性 1.内部的box会在垂直方向,从顶部一个接一个的放置 2.box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生叠加 3.每个元素的margin box的左边,与包含块border…

BFC(Block Formatting Context)块级格式化上下文 注意:BFC首先是块,其次需要具备下面的条件之一才可以(通俗来说,BFC就好比一所985或者211的高校,想要成为985或者211的高校,它是有前提条件的,首先他得是一所大学,不能拿一个小学来说,就好比BFC得先是块,才是BFC:当满足了前提条件,再需要具备其他的条件才可以.) 在正式说BFC具体内容之前,先说一下Box和Formatting Context是个什么东西: Box:大家应该都不陌生,Box是CSS布局的对…

BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响? 能否用其他css属性清除浮动带来的影响? 种种的疑问,会让你觉得CSS真的不容易精通,说精通过于高大上,就连掌握都挺难的. 在清除浮动方法解析文章中,只是稍微说明了一下上面两个问题的原因是BFC(块级格式化上下文,Block Formatting Contexts).在分享BFC之前,有必要谈谈…

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

目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什么是BFC? 在解释 BFC 是什么之前,需要先介绍Box(块级,行级...).FormattingContext的概念. Box: CSS布局的基本单位&盒模型 盒模型--块级盒/行内盒 一个盒包括了内容(content).边(border).内边距(padding).外边距(margin).下图展…