web前端培训BFC基础知识解析
2022-03-12点击量:231
web前端培训基础知识:什么是BFC什么是BFC?web前端培训中BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-levelbox参与,它规定了内部的Block-levelBox如何布局,并且与这个区域外部毫不相干。在解释什么是BFC之前,我们需要先知道Box、FormattingContext的概念。web前端培训知识Box:css布局的基本单位Box是CSS布局的对象和基本单位,直观点来说,就是一个页面是由很多个Box组成的。元素的类型和display属性,决定了这个Box的类型。不同类型的Box,会参与不同的FormattingContext(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:block-levelbox:display属性为block,list-item,table的元素,会生成block-levelbox。并且参与blockfomattingcontext;inline-levelbox:display属性为inline,inline-block,inline-table的元素,会生成inline-levelbox。并且参与inlineformattingcontext;run-inbox:css3中才有,这儿先不讲了。FormattingContextFormattingcontext是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的Formattingcontext有Blockfomattingcontext(简称BFC)和Inlineformattingcontext(简称IFC)。BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。BFC的布局规则内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子(块盒与行盒)的marginbox的左边,与包含块borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC的区域不会与floatbox重叠。BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时,浮动元素也参与计算。什么是bfc?FormattingContext:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子标签如何定位,以及与其他标签的相互关系和作用。BFC块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-levelBOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。怎样生成BFC根标签float的值不为noneoverflow的值不为visibledisplay的值为inline-blockposition的值为absolute或fixedBFC的特性垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin会发生重叠。每个标签的左外边距与包含块的左边界相接触(从左向右),即使浮动标签也是如此。BFC的区域不会与float的标签区域重叠。(不包括固定定位方法)计算BFC的髙度时,浮动子标签也参与计算。BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签,反之亦然。BFC解决的问题外边距塌陷清浮动两栏或者三栏自适应布局(只能用overflow:hidden)...