一、CSS基础知识
1.层叠（Cascading）、优先级
- 层叠三大规则：（优先程度递减）
- 样式表来源
- 选择器优先级
- 源码位置
2.选择器有哪些
- 基础选择器
- #id：ID选择器。
- Tagname：类型选择器或者标签选择器。
- .class：类选择器。
- *：通用选择器。该选择器匹配所有元素
- 组合器
- 子组合器(>) --匹配的目标元素是其他元素的直接后代。如: .parent >.child
- 相邻兄弟组合器(+) - -匹配的目标元素紧跟在其他元素后面。如: p +h2
- 通用兄弟组合器(~) --匹配所有跟随在指定元素之后的兄弟元素，如: liactive ~ li
- 复合选择器多个基础选择器可以连起来使用，如: h1.page-header
- 属性选择器
- 通过约束属性值，div[data title="aa"]
- 伪类选择器
- 选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素，如:first-child，:hover
- 伪元素选择器
- 匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2:: frstletter，div::before
- 逻辑选择器
- 较新的选择器:is() :has() :where() :not()
3.选择器优先级
内联 > id > class = attribute = pseudo-class > type = pseudo-element
4.注意
- 选择器尽量少用id
- 尽量不要用!important
- 自己的样式加载在引用库样式的后面
5.继承
6.CSS的值和单位
7.盒模型
- 负外边距
- padding、border、margin中，只有margin可以设置负值
二、布局
1.CSS 3之前/之后常用布局
- Normal Flow常规流
- Float浮动流
- Positioning定位流
- Flex弹性盒子布局
- Grid网格布局
- Multicol多列布局
- 一维空间布局
- 二维空间布局
- 文本、内容的多列展示
2.常规流布局
3.块级格式化上下文
-
BFC（block formatting context），是一种格式规范。如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。
-
如何触发一个盒子的BFC特性？以下条件满足任何一个即可：
- display: flow-root 1 inline-block
- position: absolute| fixed
- float: 不为none
- overflow: 不为visible
4.外边距塌陷
- 会产生外边距塌陷的情况：
- 消除外边距塌陷的方法：
5.弹性盒子布局
- Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。
6.网格布局
- 2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。
7.Grid和Flex布局的使用策略
- Flex（适用于大面积或整体布局）
- 一维布局
- 基于内容
- 浏览器兼容性更好
- Grid（适用于小面积或组件中，或Grid Item中）
- 二维布局
- 基于布局
- 2017年后浏览器的版本普遍支持
三、层叠上下文（The Stacking Context）
1.什么是层叠上下文
- 层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
2.形成新的层叠上下文的条件（任一即可）
- position: relative或absolute;并且z-index不是auto
- position: fixed或sticky
- flex或grid的子元素;并且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
- ...详见规范*
3.层叠顺序
层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序
4.编写z-index的建议
- 使用css变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100,方便后续的插入
