一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。
谈谈对BFC的理解是什么？
书面解释：BFC(Block Formatting Context)这几个英文拆解
- Box: CSS布局的基本单位，Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个⻚面是由很多个 Box 组成的，实际就是上个问题说的盒模型
- Formatting context：块级上下文格式化，它是⻚面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
简单的来说，它就是一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离开来
那么是如何形成的呢？BFC触发条件:
- 根元素，即HTML元素
- position: fixed/absolutefloat
- 不为noneoverflow不为visible
- display的值为inline-block、table-cell、table-caption
作用是什么？
防止margin发生重叠
两栏布局，防止文字环绕等
防止元素塌陷
为什么有时候人们用translate来改变位置而不是定位？
translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。
伪类和伪元素的区别是什么？
伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
区别
其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。
我们通过 p::before 对这段文本添加了额外的元素，通过 p:first-child 改变了文本的样式
谈谈你对flex的理解？
web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局
