今天学习的是 CSS。
CSS 简要发展历史
CSS 的出现是为了解决网页排版布局和装饰问题。
本次课程目录。
- 基础知识
- 布局和定位
- 层叠上下文
- 变形、过渡、动画
- 响应式设计
- CSS 生态相关
基础知识
CSS 层叠样式表，就是规则声明的集合。
层叠的三大规则，优先程度是往下递减的。
- 样式表来源
- 选择器优先级
- 源码位置
样式表来源重要排序，重要程度是往下递增的。
- 用户代理样式（浏览器默认模式）
- 用户样式表（很少有）
- 作者样式表（developer 写的）
- 作者样式表中的 !important
- 用户样式表中的 !important
- 用户代理样式表中的 !important
选择器的类型：
- 基础选择器
- ID选择器（#id）
- 类选择器（.class）
- 类型选择器或者标签选择器（Tagname）
- 通用选择器（*）
- 组合器
- 子组合器（>）
- 相邻兄弟组合器（+）
- 通用兄弟组合器（~）
- 复合选择器（多个基础选择器连起来使用，如 h1.page-header）
- 属性选择器（通过约束属性值，如 div[data-tiltle="aaa"]）
- 伪类选择器（选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素，如 :first-child，:hover）
- 伪元素选择器（匹配在文档中没有直接对应 HTML 元素的特定部分，或插入内容，如 h2::first-letter，div::before）
- 逻辑选择器（较新的选择器，如:is，:has，:where，:not）
选择器优先级：
内联>id>class=attribute=pseudo-class>type-pseudo-element
:is、:not、:has 本身是不计入优先级的，以参数中最高的优先级为准，:where 的优先级是0
如果是按照源码位置进行优先级的判断，那么声明位置越在后面的优先级越高。
几个在写 CSS 样式的时候需要注意的点：
- 选择器尽量少用 id
- 尽量不要用 !important
- 自己的样式加载在引用库样式的后面
padding、border、margin中，只有 margin 可以设置负值。
margin 负值最终减少的是外界可感知的宽高。
常规流布局
任意盒子的 display：
- 外部显示类型：规定了该盒子如何与同一格式上下文中的其他元素一起显示。
- 内部显示类型：规定了该盒子内部的布局方式，比如 display: flex；其外部显示是 block，参与 BFC；display: inline-flex，则外部显示是 inline，参与 IFC，他们内部的盒子都参与弹性盒子布局。
常规流中的盒子：
- 外部显示类型为 block
- 内部显示类型为 inline
Grid 和 Flex布局的使用策略
- Flex：
- 一维布局
- 基于内容
- 浏览器兼容性更好
- Grid
- 二维布局
- 基于布局
- 2017年后浏览器的版本普遍支持
大面积或整体布局推荐使用 Grid 布局
小面积或组件中，或 Grid Item 中可以使用 Flex 做灵活布局
层叠上下文
层叠上下文是对 HTML 元素的三维构想，将元素沿着垂直屏幕的虚构的 Z 轴排开。
编写 z-index 的建议：
- 使用 CSS 变量或者预处理语言的变量，管理 z-index 的值
- 将预设间隔设置10或100，方便后续的插入
变形、过渡、动画
如何写动画性能更好：
- 尽量不用触发 reflow 属性
- 在遇到性能问题的时候可以触发硬件加速，比如设置 will-change 属性、设置 transform3d 等
- 尽量使用 transform 和 opacity 去写动画
响应式设计
媒体查询的使用
设备像素、参考像素和移动设备视口
设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。
设备像素和设备相关，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。
