前言：为什么要学习CSS？
CSS能够承载更多的视觉效果，展现更多的信息量，更为精准的传递信息，从而让网页与用户更好地实现交互，提高用户的使用体验。
简单回顾CSS的发展历史
基础知识
CSS中的选择器有哪些？
基础选择器
ID选择器————#id ；
类型选择器或者标签选择器————Tagnname ；
类选择器————.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内联样式不属于选择器，但拥有极高的优先级。
布局和定位
Grid和Flex布局的使用策略
| Grid布局 | Flex布局 |
|---|---|
| 一维布局 | 二维布局 |
| 基于内容 | 基于布局 |
| 浏览器兼容性更好 | 近几年的浏览器版本普遍支持 |
Grid布局更适合大面积或整体布局
小面积或组件中，或Grid Item中可以用Flex做灵活布局
但使用中需看情况使用，一般来说是两者相互配合使用
