大家好，我是IT修真院北京分院第23期的學(xué)員郭婷婷，一枚正直純潔善良的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.知識(shí)剖析
BLOCK FORMATTING CONTEXTS
浮動(dòng)元素、絕對(duì)定位元素，不是塊級(jí)盒的塊級(jí)包含塊(比如inline-block、table-cell、table-capation)和overflow值不為visible的塊級(jí)盒子為它們的內(nèi)容建立了一個(gè)新的塊級(jí)排版上下文。
在一個(gè)塊級(jí)排版上下文中，盒子是從包含塊頂部開始，垂直的一個(gè)接一個(gè)的排列的，相鄰兩個(gè)盒子之間的垂直的間距是被margin屬性所決定的，在一個(gè)塊級(jí)排版上下文中相鄰的兩個(gè)塊級(jí)盒之間的垂直margin是折疊的。 （參與BFC的布局的只有普通流normal flow中的塊級(jí)盒，而float、position值不為relative\static的元素是脫離BFC這一布局環(huán)境的，不參與BFC的布局）
在一個(gè)塊級(jí)排版上下文中，每個(gè)盒子的左外邊是觸碰到包含塊的左邊的（對(duì)于從右向左的排版，則相反），即使在有浮動(dòng)元素參與的情況下也是如此(即使一個(gè)盒子的行盒是因?yàn)楦?dòng)而收縮了的)， 除非這個(gè)盒子新建了一個(gè)塊級(jí)排版上下文(在某些情況下這個(gè)盒子自身會(huì)因?yàn)閒loats而變窄)。
BFC布局規(guī)則
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
每個(gè)元素的margin box的左邊，與容器塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有元素，連浮動(dòng)元素也參與計(jì)算。
浮動(dòng)的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)部浮動(dòng)
防止垂直 margin 重疊。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
不同條件觸發(fā)BFC產(chǎn)生的效果是否一樣？
7.參考文獻(xiàn)
參考2：什么是BFC
8 更多討論
1、body是否可以觸發(fā)BFC
body可以觸發(fā)，只要使用觸發(fā)條件。
2、什么是IE的haslayout
hasLayout可以簡(jiǎn)單看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一個(gè)元素要么自己對(duì)自身內(nèi)容進(jìn)行組織和尺寸計(jì)算(即可通過width/height來設(shè)置自身的寬高)，要么由其containing block來組織和尺寸計(jì)算。而IFC（即沒有擁有布局）而言，則是元素?zé)o法對(duì)自身內(nèi)容進(jìn)行組織和尺寸計(jì)算，而是由自身內(nèi)容來決定其尺寸（即僅能通過line-height設(shè)置內(nèi)容行距，通過行距來支撐元素的高度；也無法通過width設(shè)置元素寬度，僅能由內(nèi)容來決定而已）
3、兩個(gè)獨(dú)立的BFC垂直margin會(huì)重疊嗎？
不會(huì)，因?yàn)槭莾蓚€(gè)獨(dú)立容器，不會(huì)影響對(duì)方。
鳴謝
感謝大家觀看
BY : 郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/css-15-bfc.html#/3
視頻鏈接：https://pan.baidu.com/s/1jI5QGPS? 密碼: 5qbp
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)。快來與我一起學(xué)習(xí)吧?！
