|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-11-3 08:51 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
这节课的重点就是 BFC(Block formatting context)直译为"块级格式化上下文"。
它是一个独立的渲染区域，只有块级盒子(Block-level box)参与（后续有解释）。
规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
通俗理解就是小甲鱼老师说的“平行宇宙”。
BFC 其实就是 css 布局中的一个概念，是一块区域，一个环境。
触发条件：
- 根元素，即 HTML 元素
- float 的值不为 none
- overflow 的值不为 visible
- display 的值为 inline-block、table-cell、table-caption
- position 的值为 absolute 或 fixed
其中最常用的方式就是设置 overflow，也是课程中小甲鱼老师惯用的生成 BFC 方式。
通过 BFC，我们可以做这些事：
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
- 可以包含浮动元素——清除内部浮动
- 分属于不同的 BFC 时可以阻止 margin 重叠
代码大家自己看视频，一定要手动敲！
重点：
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
看懂这句话，基本上就理解了 BFC 。
小甲鱼老师课程中举的例子，都是因为 BFC 内部的元素和外部的元素绝对不会互相影响。
因此， 当 BFC 外部存在浮动时，它不应该影响 BFC 内部 Box 的布局，BFC 会通过变窄，而不与浮动有重叠。
同样的，当 BFC 内部有浮动时，为了不影响外部元素的布局，BFC 计算高度时会包括浮动的高度。
避免 margin 重叠也是这样的一个道理。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-10-19 15:58:19
置顶卡
千斤顶
显身卡
发表于 2020-10-19 16:47:15