CSS
BFC（块级格式化上下文）
规则
- body根元素
- 浮动元素，float不能为
none - position值为
absolute、fixed - display为
inline-block、table-cells、flex - overflow不为
visible
作用
- BFC不会和float重叠
- BFC可以解决margin重叠
- 计算BFC的高度时，浮动元素也参与计算
盒模型
普通盒模型content不包括padding，而IE盒模型下content包含padding和border。
普通盒模型
content、padding、border、margin
IE盒模型
content(padding、content、border)、margin
伪类和伪元素
伪类
伪类用于向某些选择器添加特殊的效果
伪元素
伪元素用于将特殊的效果添加到某些选择器
选择器
参考文章
优先级
import > id > class > tagName
样式优先级
内联样式 > css选择器样式 > link引入的样式
position
相对定位(relative)
相对于自身进行定位
绝对定位(absolute)
基于relative进行定位，如果relative没有定位，则根据父元素定位，最后根据浏览器窗口定位
固定定位(fixed)
相对浏览器进行定位
粘性定位
滑动到一定距离，进行固定定位
布局方式
float
早期的布局方式，通过元素浮动方式，需要清除浮动
flex
弹性布局，当前流行
grid
网格布局，兼容不好（指连chrome57+ 都没有的电脑，该淘汰了）
![[grid]](../../../../assets/wiki/web/css_grid.png)
层级上下文
参考文章
产生层级的属性
position值不为static、transform、z-index、will-change、filter、opacity
BEM命名规范
参考文章
BEM是块（block）、元素（element）、修饰符（modifier）的简写，由Yandex团队提出的一种前端CSS命名方法论。
实现
- 中划线
仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号
__ 双下划线
双下划线用来连接块和块的子元素
_ 单下划线
单下划线用来描述一个块或者块的子元素的一种状态
样式顺序
布局定位属性
display、position、float、clear、visibility、overflow
自身属性
width、height、margin、padding、border、background
文本属性
color、font、text-decoration、text-align、vertical-align、white-space、break-word
其他属性（CSS3）
content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient(渐变)