大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网CSS任务7中涉及的关于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的区别。
小课堂【北京第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的块级盒子为它们的内容建立了一个新的块级排版上下文。
在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。 （参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素是脱离BFC这一布局环境的，不参与BFC的布局）
在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)， 除非这个盒子新建了一个块级排版上下文(在某些情况下这个盒子自身会因为floats而变窄)。
BFC布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算。
浮动的BOX区域不叠加到BFC上。
3.常见问题
3.1 如何触发BFC？
3.2 BFC的作用
4 解决方案
4.1 触发BFC
根元素
float属性不为none
position为absolute或fixed
display为inline-blcok、table-cell、table-caption、flex、inline-flex
overflow不为visible
4.2 BFC的作用
自适应两栏布局
清除内部浮动
防止垂直 margin 重叠。
5.编码实战
6.扩展思考
不同条件触发BFC产生的效果是否一样？
7.参考文献
参考2：什么是BFC
8 更多讨论
1、body是否可以触发BFC
body可以触发，只要使用触发条件。
2、什么是IE的haslayout
hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高)，要么由其containing block来组织和尺寸计算。而IFC（即没有拥有布局）而言，则是元素无法对自身内容进行组织和尺寸计算，而是由自身内容来决定其尺寸（即仅能通过line-height设置内容行距，通过行距来支撑元素的高度；也无法通过width设置元素宽度，仅能由内容来决定而已）
3、两个独立的BFC垂直margin会重叠吗？
不会，因为是两个独立容器，不会影响对方。
鸣谢
感谢大家观看
BY : 郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/css-15-bfc.html#/3
视频链接：https://pan.baidu.com/s/1jI5QGPS 密码: 5qbp
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论