web前端培訓(xùn)BFC基礎(chǔ)知識解析
2022-03-12點擊量:226
web前端培訓(xùn)基礎(chǔ)知識:什么是BFC什么是BFC?web前端培訓(xùn)中BFC(Blockformattingcontext)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域,只有Block-levelbox參與,它規(guī)定了內(nèi)部的Block-levelBox如何布局,并且與這個區(qū)域外部毫不相干。在解釋什么是BFC之前,我們需要先知道Box、FormattingContext的概念。web前端培訓(xùn)知識Box:css布局的基本單位Box是CSS布局的對象和基本單位,直觀點來說,就是一個頁面是由很多個Box組成的。元素的類型和display屬性,決定了這個Box的類型。不同類型的Box,會參與不同的FormattingContext(一個決定如何渲染文檔的容器),因此Box內(nèi)的元素會以不同的方式渲染。讓我們看看有哪些盒子: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規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。最常見的Formattingcontext有Blockfomattingcontext(簡稱BFC)和Inlineformattingcontext(簡稱IFC)。BFC是一個獨立的布局環(huán)境,其中的元素布局是不受外界的影響,并且在一個BFC中,塊盒與行盒(行盒由一行中所有的內(nèi)聯(lián)元素所組成)都會垂直的沿著其父元素的邊框排列。BFC的布局規(guī)則內(nèi)部的Box會在垂直方向,一個接一個地放置。Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。每個盒子(塊盒與行盒)的marginbox的左邊,與包含塊borderbox的左邊相接觸(對于從左往右的格式化,否則相反)。即使存在浮動也是如此。BFC的區(qū)域不會與floatbox重疊。BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此。計算BFC的高度時,浮動元素也參與計算。什么是bfc?FormattingContext:指頁面中的一個渲染區(qū)域,并且擁有一套渲染規(guī)則,他決定了其子標(biāo)簽如何定位,以及與其他標(biāo)簽的相互關(guān)系和作用。BFC塊級格式化上下文,它是指一個獨立的塊級渲染區(qū)域,只有Block-levelBOX參與,該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局,且與區(qū)域外部無關(guān)。怎樣生成BFC根標(biāo)簽float的值不為noneoverflow的值不為visibledisplay的值為inline-blockposition的值為absolute或fixedBFC的特性垂直方向上的距離由margin決定,屬于同一個BFC的兩個相鄰標(biāo)簽的margin會發(fā)生重疊。每個標(biāo)簽的左外邊距與包含塊的左邊界相接觸(從左向右),即使浮動標(biāo)簽也是如此。BFC的區(qū)域不會與float的標(biāo)簽區(qū)域重疊。(不包括固定定位方法)計算BFC的髙度時,浮動子標(biāo)簽也參與計算。BFC就是頁面上的一個隔離的獨立容器,容器里面的子標(biāo)簽不會影響到外面標(biāo)簽,反之亦然。BFC解決的問題外邊距塌陷清浮動兩欄或者三欄自適應(yīng)布局(只能用overflow:hidden)...