CSS是我们在进行前端网页设计中必不可少的内容，跟着青训营的老师，从一个小白的视角，我们来深入的理解和学习CSS的内容！
一、基础知识
1、层叠（cascading）、优先级
样式表就是规则声明的集合，在集合中不可避免的会出现声明冲突，层叠就是用来解决规则产生冲突的规则。
层叠三大规则
1、样式表来源
2、选择器优先级
3、源码位置
2、选择器
选择器有哪些：
基础选择器
#id―—ID选择器。Tagname—一类型选择器或者标签选择器。
.class――类选择器。*――通用选择器。该选择器匹配所有元素
组合器
子组合器(>)----匹配的目标元素是其他元素的直接后代。如: .parent >.child。
相邻兄弟组合器(+)----匹配的目标元素紧跟在其他元素后面。如:p +h2。
通用兄弟组合器(~)----匹配所有跟随在指定元素之后的兄弟元素，如: li.active ~li。
复合选择器
多个基础选择器可以连起来使用，如:h1.page-header。
属性选择器
通过约束属性值，div[data-title="aaa"]
伪类选择器
选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如：first-child ，：hover
伪元素选择器
匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2::first-letter, div::before
逻辑选择器
较新的选择器: is( ) :has() :where() :not()
优先级的比较
源码顺序
简而言之就是谁最后声明的谁生效
由层叠概念引申出的CSS代码good practice
1.选择器尽量少用id写样式，大面积使用id会降低CSS的复用，并且id选择器的优先级较高，不利于后序的覆盖
2.尽量不要用！Important，由于其优先级太高，不利于后期扩展，会压缩灵活性
3.自己的样式加载在引用库样式的后面，保证自己的样式生效
3、继承
默认继承
大部分具有继承特性的属性跟文本相关︰
color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
还有少部分列表、表格的属性
可以使用inherit关键字显示指定一个有继承特性的属性的属性值从其父元素继承
4、CSS的值和单位
CSS值和单位的规范www.w3.org/TR/css-valu…
5、盒模型
浏览器根据视觉格式化模型(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、...
不提倡高频使用负margin，他会导致代码的可读和维护性的复杂性提高，只是在局部调整或需要结合无法修改的第三方组件时，使用负margin做边距调整。
