基础知识
层叠三大规则
- 样式表来源
- 选择器优先级
- 源码位置
样式表来源重要排序
- 用户代理样式（浏览器默认样式）
- 用户样式表（很少有）
- 作者样式表(developer写的)
- 作者样式表中的 ! important
- 用户样式表中的 ! important
- 用户代理样式表中的 ! important
基础选择器
#id——ID选择器。Tagname——类型选择器或者标签选择器。.class——类选择器。*——通用选择器。该选择器匹配所有元素
组合器
子组合器(>)――匹配的目标元素是其他元素的直接后代。如: .parent>.child。相邻兄弟组合器(+)—―匹配的目标元素紧跟在其他元素后面。如: p +h2。 通用兄弟组合器(~ )――匹配所有跟随在指定元素之后的兄弟元素，如: li.active~li。复合选择器：多个基础选择器可以连起来使用，如:h1.page-header。
属性选择器
通过约束属性值,div[data-title="aaa"]
伪类选择器 选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如:first-child,:hover
伪元素选择器
匹配在文档中没有直接对应HTMIL.元素的特定部分，或插入内容。如 h2::first-letter, div::before
逻辑选择器 较新的选择器:is() :has() :where() :not()
由层叠概念引申出的css代码good practice
选择器尽量少用id
尽量不要用! important
自己的样式加载在引用库样式的后面
盒模型
浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型，css通过盒模型做layout。
控制盒子类型
display: block、inline、inline-block、flex、 ...
控制盒子大小&计算方式
width，height ...
box-sizing:content-box、border-box
控制盒中内容流
overflow:auto、scroll、hidden、...
控制定位
position: static、relative、absolute、fixed、sticky
是否可见 visibility: visible、hidden、...
布局和定位
概述
css 3之前的常用布局
Normal Flow常规流： 默认的布局方式；有块级格式化上下文和内联；格式化上下文。
Float浮动流： 用float属性控制；脱流，做横向布局。
Positioning定位流： 用position属性控制；fixed和absolute脱离文档流；可以自由定位、覆盖等。
cSS 3之后的新增布局
- Flex弹性盒子布局——一维空间布局
- Grid网格布局——二维空间布局
- Multicol多列布局——文本、内容的多列展示
**定位 **
为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用 top, right,bottom, left对其进行定位。
relative—— 元素相对于自己原来在文档流中的位置进行定位,但是原来文档流的空间还在。
absolute—— 元素被移出正常文档流，且没有预留空间,相对于最近的非static定位祖先元素的进行定位。
fixed—— 元素被移出正常文档流，且没有预留空间,相对于屏幕视口进行定位，屏幕滚动也不会改变位置。
sticky—— 元素相对它的最近滚动祖先(祖先的overflow是scroll/hidden/auto)的视口(scrollport)定位。
收获：
通过本次课程的学习，我了解到部分CSS知识模块,如布局、层叠上下文等；还学习了一些cSS生态相关的知识；梳理了一个简明的知识脉络。
