获得徽章 0
- 【Toki的前端学习小记】BFC 原理：昨天对面的同事问了一个样式的问题，同样的样式作用在一个 for 渲染出来的元素和手写出来的元素出现了不同的效果，具体表现为边距变大。后面经过了解发现了这是一个跟 BFC 相关的问题，于是学习了这个相对陌生的概念。
简单总结一下链接文章的内容：
💡BFC 的概念：BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
💡触发 BFC 的方式：
① body元素；
② 浮动元素：float 除 none 以外的值；
③ 绝对定位元素：position（absolute、fixed）；
④ display 为 inline-block、table-cells、flex；
⑤ overflow 除 visible 之外的值（hidden、auto、scroll）
💡BFC 的特性和应用：
① 同一个 BFC 下的元素外边距（margin）会折叠，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中；
② BFC 可以包含浮动元素，参考链接的例子理解；
③ BFC 可以阻止元素被浮动元素覆盖（元素中的文本信息默认不会被浮动元素覆盖），此特性可以用来实现两列自适应布局（例如：左边固定，右边自适应宽度）。展开赞过
22 - 【Toki的前端学习小记】axios的拦截器（interceptor）和转换器（transformRequest和transformResponse）都可以实现对发送和返回的数据进行“预处理”；而区别在于拦截器的处理是异步的，转换器是同步的。赞过 评论1
juejin.cn
