大家好，我是IT修真院北京分院第23期的學員郭婷婷，一枚正直純潔善良的WEB前端程序員叔汁。
今天給大家分享一下摆舟，修真院官網(wǎng)CSS任務(wù)7中涉及的關(guān)于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的區(qū)別施蜜。
小課堂【北京第213期】
分享人：郭婷婷
1.背景介紹
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
2.知識剖析
BLOCK FORMATTING CONTEXTS
浮動元素、絕對定位元素，不是塊級盒的塊級包含塊(比如inline-block、table-cell是晨、table-capation)和overflow值不為visible的塊級盒子為它們的內(nèi)容建立了一個新的塊級排版上下文。
在一個塊級排版上下文中舔箭，盒子是從包含塊頂部開始罩缴，垂直的一個接一個的排列的，相鄰兩個盒子之間的垂直的間距是被margin屬性所決定的，在一個塊級排版上下文中相鄰的兩個塊級盒之間的垂直margin是折疊的箫章。 （參與BFC的布局的只有普通流normal flow中的塊級盒烙荷，而float、position值不為relative\static的元素是脫離BFC這一布局環(huán)境的炉抒，不參與BFC的布局）
在一個塊級排版上下文中奢讨，每個盒子的左外邊是觸碰到包含塊的左邊的（對于從右向左的排版，則相反）焰薄，即使在有浮動元素參與的情況下也是如此(即使一個盒子的行盒是因為浮動而收縮了的)， 除非這個盒子新建了一個塊級排版上下文(在某些情況下這個盒子自身會因為floats而變窄)扒袖。
BFC布局規(guī)則
內(nèi)部的Box會在垂直方向塞茅，一個接一個地放置。
Box垂直方向的距離由margin決定季率。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊野瘦。
每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化飒泻，否則相反)鞭光。即使存在浮動也是如此。
BFC就是頁面上的一個隔離的獨立容器泞遗，容器里面的子元素不會影響到外面的元素惰许，反之亦然。
計算BFC的高度時史辙，考慮BFC所包含的所有元素汹买，連浮動元素也參與計算。
浮動的BOX區(qū)域不疊加到BFC上聊倔。
3.常見問題
3.1 如何觸發(fā)BFC晦毙？
3.2 BFC的作用
4 解決方案
4.1 觸發(fā)BFC
根元素
float屬性不為none
position為absolute或fixed
display為inline-blcok、table-cell耙蔑、table-caption见妒、flex、inline-flex
overflow不為visible
4.2 BFC的作用
自適應(yīng)兩欄布局
清除內(nèi)部浮動
防止垂直 margin 重疊甸陌。
5.編碼實戰(zhàn)
6.擴展思考
不同條件觸發(fā)BFC產(chǎn)生的效果是否一樣须揣？
7.參考文獻
參考2：什么是BFC
8 更多討論
1、body是否可以觸發(fā)BFC
body可以觸發(fā)邀层，只要使用觸發(fā)條件返敬。
2、什么是IE的haslayout
hasLayout可以簡單看作是IE5.5/6/7中的BFC(Block Formatting Context)寥院。也就是一個元素要么自己對自身內(nèi)容進行組織和尺寸計算(即可通過width/height來設(shè)置自身的寬高)劲赠，要么由其containing block來組織和尺寸計算。而IFC（即沒有擁有布局）而言，則是元素無法對自身內(nèi)容進行組織和尺寸計算凛澎，而是由自身內(nèi)容來決定其尺寸（即僅能通過line-height設(shè)置內(nèi)容行距霹肝，通過行距來支撐元素的高度；也無法通過width設(shè)置元素寬度塑煎，僅能由內(nèi)容來決定而已）
3沫换、兩個獨立的BFC垂直margin會重疊嗎？
不會最铁，因為是兩個獨立容器讯赏，不會影響對方。
鳴謝
感謝大家觀看
BY : 郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/css-15-bfc.html#/3
視頻鏈接：https://pan.baidu.com/s/1jI5QGPS? 密碼: 5qbp
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師冷尉，現(xiàn)在開始漱挎，找個師兄，帶你入門雀哨，掌控自己學習的節(jié)奏磕谅，學習的路上不再迷茫”雾棺。
這里是技能樹.IT修真院膊夹，成千上萬的師兄在這里找到了自己的學習路線，學習透明化捌浩，成長可見化放刨，師兄1對1免費指導〖嗡ǎ快來與我一起學習吧?宏榕！
