成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

一篇文章帶拿下盒模型BFC渲染機(jī)制

DangoSky / 1001人閱讀

摘要:它是頁(yè)面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。一個(gè)的范圍包含創(chuàng)建該上下文元素的所有子元素,但不包括創(chuàng)建了新的子元素的內(nèi)部元素。

走在前端的大道上

本篇將自己讀過(guò)的相關(guān) 盒模型BFC 文章中,對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這(會(huì)對(duì)原文進(jìn)行刪改),會(huì)不斷豐富提煉總結(jié)更新。

一.常見(jiàn)定位方案

在講 BFC 之前,我們先來(lái)了解一下常見(jiàn)的定位方案,定位方案是控制元素的布局,有三種常見(jiàn)方案:

普通流 (normal flow)

在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在這個(gè)過(guò)程中,行內(nèi)元素水平排列,直到當(dāng)行被占滿(mǎn)然后換行,塊級(jí)元素則會(huì)被渲染為完整的一個(gè)新行,除非另外指定,否則所有元素默認(rèn)都是普通流定位,也可以說(shuō),普通流中元素的位置由該元素在 HTML 文檔中的位置決定。

浮動(dòng) (float)

在浮動(dòng)布局中,元素首先按照普通流的位置出現(xiàn),然后根據(jù)浮動(dòng)的方向盡可能的向左邊或右邊偏移,其效果與印刷排版中的文本環(huán)繞相似。

絕對(duì)定位 (absolute positioning)

在絕對(duì)定位布局中,元素會(huì)整體脫離普通流,因此絕對(duì)定位元素不會(huì)對(duì)其兄弟元素造成影響,而元素具體的位置由絕對(duì)定位的坐標(biāo)決定。

二、BFC 概念

Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。常見(jiàn)的FC有BFC、IFC,還有GFC和FFC。

那么 BFC 是什么呢?

BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文),它屬于上述定位方案的普通流。

一個(gè)BFC的范圍 包含創(chuàng)建該上下文元素的所有子元素,但不包括創(chuàng)建了新BFC的子元素的內(nèi)部元素。這從另一方角度說(shuō)明,一個(gè)元素不能同時(shí)存在于兩個(gè)BFC中。因?yàn)槿绻粋€(gè)元素能夠同時(shí)處于兩個(gè)BFC中,那么就意味著這個(gè)元素能與兩個(gè)BFC中的元素發(fā)生作用,就違反了BFC的隔離作用。

具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器,容器里面的元素不會(huì)在布局上影響到外面的元素,并且 BFC 具有普通容器所沒(méi)有的一些特性。

通俗一點(diǎn)來(lái)講,可以把 BFC 理解為一個(gè)封閉的大箱子,箱子內(nèi)部的元素?zé)o論如何翻江倒海,都不會(huì)影響到外部。

三、布局規(guī)則

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置

每個(gè)元素的左外邊距與包含塊的左邊界相接觸(從左向右),即使浮動(dòng)元素也是如此。(這說(shuō)明BFC中子元素不會(huì)超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)

屬于同一個(gè)BFC的 兩個(gè)相鄰Box的 上下margin會(huì)發(fā)生折疊;

BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊(阻止元素被浮動(dòng)元素覆蓋)

計(jì)算BFC的高度時(shí),浮動(dòng)子元素也參與計(jì)算(清除內(nèi)部浮動(dòng))

四、觸發(fā) BFC

只要元素滿(mǎn)足下面任一條件即可觸發(fā) BFC 特性:

body 根元素

浮動(dòng)元素:float 除 none 以外的值,如left、right

絕對(duì)定位元素:position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 ,如hidden、auto、scroll

注意:有些文章中說(shuō)HTML可以觸發(fā)BFC,沒(méi)有說(shuō)body,按照上邊介紹的一個(gè)BFC的范圍和下邊的案例1 來(lái)看,HTML能不能觸發(fā)不確定,但是body是可以的

五、BFC的特性及應(yīng)用 1.普通流中兩個(gè)相鄰的塊元素 垂直方向上的 margin會(huì)折疊



   

效果圖是:

發(fā)生外邊距折疊,是因?yàn)樗麄?同屬于 body這個(gè)根元素
讓 它們 不屬于同一個(gè)BFC,就能避免外邊距折疊:




    

效果圖是:

2.普通流中 父子嵌套關(guān)系的2個(gè)塊元素 垂直方向上的 margin會(huì)折疊
    
  
    
        

然后,我們給子元素添加一個(gè)margin-top: 50px時(shí)

.son {
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 50px;
}

我們神奇的發(fā)現(xiàn)父子元素同時(shí)"掉下來(lái)了50px",如圖所示

3.BFC可以包含浮動(dòng)的元素(清除浮動(dòng))

正常情況下,浮動(dòng)的元素會(huì)脫離普通文檔流,所以下面的代碼里:




    

外層的div會(huì)無(wú)法包含 內(nèi)部浮動(dòng)的div,效果見(jiàn)下圖:

但如果我們 觸發(fā)外部容器的BFC,根據(jù)BFC規(guī)范 計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算,那么外部div容器就可以包裹著浮動(dòng)元素,所以只要把代碼修改如下:




    

就可以完成以下效果:

4.實(shí)現(xiàn)2欄自適應(yīng)布局

要求左側(cè)固定300px,右側(cè)自適應(yīng)的布局

 
    
    
left
right

原理:BFC元素不會(huì)和浮動(dòng)的元素重疊

參考文章:
10 分鐘理解 BFC 原理
CSS中重要的BFC
淺析CSS里的 BFC 和 IFC
前端人人都應(yīng)該理解的盒模型BFC渲染機(jī)制

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/117233.html

相關(guān)文章

  • 前端人人都應(yīng)該理解的模型BFC渲染機(jī)制

    摘要:如圖所示如果你眼力不錯(cuò)或者親自試試會(huì)發(fā)現(xiàn)個(gè)之間設(shè)置了的距離但是他們現(xiàn)在實(shí)際的間距卻是。如何設(shè)置盒模型的類(lèi)型通過(guò)的就可以設(shè)置為盒模型了默認(rèn)是盒模型渲染機(jī)制基本慨念是英文縮寫(xiě)翻譯為塊級(jí)格式化上下文。說(shuō)白了就是一種盒模型的渲染規(guī)則。 前端人人都要懂的盒模型BFC渲染機(jī)制 為什么我們說(shuō),前端工程師有必要需要了解BFC渲染機(jī)制? 因?yàn)槿绻阋粋€(gè)前端壓根沒(méi)聽(tīng)說(shuō)過(guò)BFC,那你是如何理解下面這幾個(gè)cs...

    testHs 評(píng)論0 收藏0
  • 想要清晰的明白(): CSS視覺(jué)格式化模型|模型|定位方案|BFC

    摘要:并且這種過(guò)程遵循標(biāo)準(zhǔn)的描述只要不是和絕對(duì)定位方式布局的,都在普通流里面。定位相對(duì)定位在普通流之中,是相對(duì)于它在普通流中的位置中進(jìn)行移動(dòng),元素占據(jù)原來(lái)位置絕對(duì)定位脫離普通流,不占據(jù)空間相對(duì)于距離它最近的那個(gè)已定位的祖先相對(duì)絕對(duì)元素決定的。 視覺(jué)格式化模型 頁(yè)面(文檔樹(shù))可以想象成是由一個(gè)個(gè)的Box組合而成的,而視覺(jué)格式化模型(Visual formatting model)是一套規(guī)則,將...

    Edison 評(píng)論0 收藏0
  • 【前端芝士樹(shù)】詳解CSS模型BFC、OffsetWidth&ClientWidth&am

    摘要:提供了糟糕的支持,而雖然接近標(biāo)準(zhǔn),但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問(wèn)題,但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問(wèn)題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁(yè)。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開(kāi)始,一步步涉及一些常見(jiàn)的前端筆試和面試點(diǎn) 主要參考自第一篇文章,然而筆者在讀的時(shí)...

    binta 評(píng)論0 收藏0
  • CSS中各種布局的背后(*FC)

    摘要:中各種布局的背后,實(shí)質(zhì)上是各種的組合。相反,一些塊容器盒,比如非替換行內(nèi)塊及非替換表格單元格,不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒,用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后,實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<