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

資訊專欄INFORMATION COLUMN

前端BFC布局學(xué)習(xí)

zhangrxiang / 626人閱讀

摘要：按照我的理解是我們在某一條件下會(huì)觸發(fā)布局，會(huì)產(chǎn)生一定的效果。它決定了塊級元素如何對它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。

BFC，全稱為(Block formatting context)。按照我的理解是我們在某一條件下會(huì)觸發(fā)BFC布局，會(huì)產(chǎn)生一定的效果。

Block Formatting Contexts翻譯為：塊級元素格式化上下文。它決定了塊級元素如何對它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。

其中塊級元素可以理解為父級元素，內(nèi)容即是子元素，子元素也為塊元素，其他元素指的是與內(nèi)容同級別的兄弟元素，相互作用指的是BFC里的元素與外面的元素不會(huì)發(fā)生影響。

而觸發(fā)BFC的條件是：

1、float的值不為none
2、overflow的值不為visible
3、display的值為table-cell、table-caption和inline-block之一
4、position的值不為static或者releative中任何一個(gè)

普通文檔流的布局規(guī)則(一般像我這種新手沒有布局意識(shí)的，就應(yīng)該是普通文檔流布局了。。。)

1、浮動(dòng)的元素是不會(huì)被父級計(jì)算高度
2、非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
3、margin會(huì)傳遞給父級
4、兩個(gè)相鄰的元素上下margin會(huì)重疊

BFC的布局規(guī)則

1、浮動(dòng)的元素會(huì)被父級計(jì)算高度(父級觸發(fā)了BFC)
2、非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素的位置（非浮動(dòng)元素觸發(fā)了BFC）
3、margin不會(huì)傳遞給父級（父級觸發(fā)了BFC）
4、兩個(gè)相鄰的元素上下margin不會(huì)重疊（給其中一個(gè)元素添加一個(gè)多帶帶的父級，然后讓他的父級觸發(fā)了BFC）

實(shí)例：




    



 


    
hello1

    
helloagain



 


    
hello1

    
helloagain







    
hello1

    

        
helloagain

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52632.html

相關(guān)文章

  • 前端BFC布局學(xué)習(xí)

    摘要：按照我的理解是我們在某一條件下會(huì)觸發(fā)布局，會(huì)產(chǎn)生一定的效果。它決定了塊級元素如何對它的內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。 BFC，全稱為(Block formatting context)。按照我的理解是我們在某一條件下會(huì)觸發(fā)BFC布局，會(huì)產(chǎn)生一定的效果。 Block Formatting Contexts翻譯為：塊級元素格式化上下文。它決定了塊級元素如何對它的內(nèi)容進(jìn)行布局...

    YFan 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • CSS中重要的BFC

    摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位...

    plus2047 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（二十五）--CSS的正常流

    摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎(chǔ)上，有相關(guān)規(guī)則，使得一些盒占據(jù)了正常流需要的空間，可以把理解為文字環(huán)繞。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)...

    dcr309duan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<