BFC
1 定义:
BFC - Block Formatting Context 块级格式化上下文 BFC的定义,在官方文档到中是这么介绍的:一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素
2 触发方式:
a. body根元素
b. 设置定位: absolute 或者fixed;
c. 行内块显示模式, inline-block;
d. 设置overflow: hidden,auto,scroll;
e. 表格单元格, table-cell;
f. 弹性布局,flex;
3 作用:
a. 解决外边距的塌陷问题(垂直塌陷)
b. 利用BFC解决包含塌陷
c. 清除浮动
d. BFC可以阻止标准流元素被浮动元素覆盖
BEM
1 定义:
BEM就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法可以使css类对其他开发者来说更加透明且具有意义。BEM约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时较大的项目。
BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性,就能够明白模块之间是如何关联的,有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。