web前端培訓BFC基礎知識解析
2022-03-12點擊量:227
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)...