2022.7.2
1.CSS 简介
1994 年，挪威人赖先生（Håkon Wium Lie）提出了 CSS 草案，他也是发明万维网的李先生的同事。
CSS 全称层叠样式表（Cascading Style Sheets），样式软件有很多种，但是 CSS 是唯一一种能做到灵活层叠的。
但某种意义上也是由于太过于灵活，导致 CSS 不正交，对于深入学习的人非常不友好。理解 CSS 技术，有时候要靠感性思维（艺术思维）而不是逻辑思维，通过不断的实践（包括学习别人的实践成果）来获得新知识。
2.CSS 基础
（1）文档流（normal flow）是指网页元素的解析流程，主要指网页自上而下、自左至右的解析方式。
学习文档流需要掌握 inline、block、inline-block 的含义和用法，理解 margin 合并和两种盒模型的概念。
（2）盒模型（box model）是指 CSS 里的一种规律模型。在 CSS 中，所有的元素都被一个个的“盒子“（box）包着，用来描述这种盒子的规律模型，被称为“盒模型“。
盒模型有两种，分别是 content-box（内容盒模型）和 border-box（边框盒模型）。
内容盒模型的宽/高，由内容（content）决定；边框盒模型的宽/高，由内容（content）、padding、border 之和决定。
除了项目中的浏览器不支持 border-box 的情况，一般优先使用后者。
*扩展-CSS 元素定位：CSS 的元素定位的知识与盒模型相关，能够决定各个元素的层叠关系。控制元素之间的层叠关系，需要掌握默认的层叠关系、position 及相关五个属性的用法，和 z-index 控制高度。
3.CSS 布局
控制布局是 CSS 最重要的作用之一，一般分类为固定宽度布局和不固定宽度布局，以及专用于手机的响应式布局。布局模板有 Float、flex 和 grid 三种。
Float 布局一般用于需要兼容 IE9 或以前版本浏览器的场景，固定宽度，不考虑响应式，且必须要给最顶端父元素添加 clearfix 相关代码。
Flex 布局一般用于 IE9 以后的浏览器场景，并且可以满足所有相关的手机网页场景（做响应式）。
grid 布局只受到最新浏览器的支持，稍微老版的浏览器就无法正常运行。
4.CSS 动画
要熟练掌握 CSS 的动画效果，需要先了解浏览器渲染原理。各个浏览器厂商的渲染方式都有所不同，但大体流程相似。
浏览器渲染流程：
-
根据 HTML 构建 HTML 树（DOM）
-
根据 CSS 构建 CSS 树（CSSOM）
-
将两棵树合并成一颗渲染树（render tree）
-
Layout 布局（文档流、盒模型，并计算大小和位置）
-
Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
-
Compose 合成（根据层叠关系展示画面）
JS 有三种不同的渲染更新方式，基于其性能和效果的不同，需要根据场景准确应用。
CSS 动画需要 transform 来指定动画效果和坐标，一般有位移（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）四种功能。
CSS 补充中间帧的方式有两种，分为过渡（transition）和动画（animation）。JS 也可以补充中间帧，但不常用。
transition 可以控制的属性有 4 种，依次是：过渡效果|时长|过渡方式|延迟。实际书写的时候，可以根据需要省略后两个属性。
animation 的属性更丰富，功能更强大，属性依次是：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名。animation 需要搭配@keyframes 使用。
