CSS发展历史
- CSS1：解决网页排版布局和装饰问题，第一个有“层叠”概念的语言
- CSS2:变现和内容（Html）分离
- CSS2.1：对CSS2的修正、扩展，代替CSS2
- CSS3：规范模块化发展‘样式丰富、酷炫；提高网站的可维护性以及性能速度
1.基础知识
层叠、优先级
层叠三大规则（优先程度递减）：
1. 样式表来源
2. 原则其优先级
3. 源码位置
谁在后申明，谁生效
选择器：
| 名称 | 作用 | |
|---|---|---|
| #id | ID选择器 | |
| Tagname | 类选择器或者标签选择器 | |
| .class | 类选择器 | |
| 子选择器（>） | 匹配的目标元素是其他元素的直接后代 | |
| 相邻兄弟组合器（+） | 匹配的目标元素紧跟在其他元素后面。 | |
| 通用兄弟组合器（~） | 匹配所有跟随咋指定元素之后的兄弟元素。 | |
| 复合选择器 | 多个基础选择器可以连起来使用 | 。 |
| 属性选择器 | 通过约束属性，div[data-title='aaa'] | |
| 伪类选择器 | 选中处于某个特定或相对于其父级或兄弟的位置的元素。 | |
| 伪元素选择器 | 匹配在文档中没有直接对应HTML元素的特定部分，后插入内容。 | |
| 逻辑选择器 | 较新的选择器：is():has():where():not() |
- 选择器尽量少用id
- 尽量不要用!imporant
- 自己的样式加载在引用库样式的后面
继承
大部分具有继承特性的属性跟文本相关 可以使用inherit关键字显示指定一个属性值从其父元素继承
CSS的值和单位：
文字类；数值类；函数生成
盒模型
浏览器根据视觉格式化模型，将所有元素表示为盒子模型，css通过盒模型做layout
2.布局
常规流布局
常规流中的盒子：外部显示类型为block；外部显示类型为inline
块级格式化上下文（block formatting context）
如何触发一个盒子的BFC特性？以下条件满足任何一个即可
- display:flow-root|inline-block;
- position:absolute|fixed;
- float:不为none;
- overflow:不为visible
外边框塌陷 会产生外边距塌陷的情况：
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
消除外边距塌陷的方法：
- 在两个相邻的上下外边距之间增加border、padding或者内联元素，使之不相邻
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中
弹性盒子布局
Flexible Box Layout 是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向（横向/纵向）的调整更为灵活。
网络布局
2017年推出的Gird 布局可以定义由行和列组成的二位布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。
定位Position
为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top，right，bottom，left对其进行定位。
relative；absolute；fixed；sticky
3.层叠上下文
形成新的层叠上下文的条件（任一即可）
- position：relative或absolute；并且z-index不是auto
- position：fixed或sticky
- filex或grid的子元素；并且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
编写z-index的建议：
- 使用css变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100，方便后续的插入
