课程内容
基础知识；布局和定位；层叠上下文；变形、过渡、动画；响应式设计；CSS生态相关
CSS特点
- 网页样式和布局：CSS是一种用于描述HTML元素在网页上呈现的样式和布局的语言。
- 设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。
- 网页性能优化：通过有效地使用CSS，我们可以减少网页的加载时间、优化渲染速度，提高网站的性能。
- 动画和交互：CSS3引入了许多新特性，如动画、过渡、变形等，使得我们可以仅使用CSS来实现一些原本需要JavaScript的动画和交互效果。
- 响应式设计：CSS的媒体查询功能使得我们可以为不同屏幕尺寸的设备创建自适应的布局，实现响应式设计。
- 提高开发效率：掌握CSS可以帮助我们更快速地完成网页开发。
- 前端开发的基本技能：CSS是前端开发的三大基石之一（HTML、CSS和JavaScript），掌握CSS是成为一名合格的前端开发人员的基本要求。
viewport的meta标签中的属性
width：设置 viewport 的宽度。通常，将宽度设置为device-width，这意味着 viewport 的宽度等于设备的物理屏幕宽度。这有助于确保页面在不同尺寸的设备上自适应。height：设置 viewport 的高度。与width类似，可以使用device-height作为值。然而，实际使用中，高度属性很少用到，因为大多数情况下，只需关注宽度即可。initial-scale：设置页面的初始缩放比例。1 表示不缩放，即页面以 100% 的大小显示。设置适当的初始缩放可以确保页面在加载时以合适的大小呈现minimum-scale：定义页面的最小缩放比例。例如，设置为 0.5 表示用户可以将页面缩小到 50% 的大小。maximum-scale：定义页面的最大缩放比例。例如，设置为 2 表示用户可以将页面放大到 200% 的大小user-scalable：指定用户是否可以手动缩放页面。设置为yes允许缩放，设置为no禁止缩放。通常，允许用户缩放页面以适应他们的需求是一个好的做法，但在某些情况下，你可能希望禁止缩放。
viewport的meta标签中的属性
width：设置 viewport 的宽度。通常，将宽度设置为device-width，这意味着 viewport 的宽度等于设备的物理屏幕宽度。这有助于确保页面在不同尺寸的设备上自适应。height：设置 viewport 的高度。与width类似，可以使用device-height作为值。然而，实际使用中，高度属性很少用到，因为大多数情况下，只需关注宽度即可。initial-scale：设置页面的初始缩放比例。1 表示不缩放，即页面以 100% 的大小显示。设置适当的初始缩放可以确保页面在加载时以合适的大小呈现minimum-scale：定义页面的最小缩放比例。例如，设置为 0.5 表示用户可以将页面缩小到 50% 的大小。maximum-scale：定义页面的最大缩放比例。例如，设置为 2 表示用户可以将页面放大到 200% 的大小user-scalable：指定用户是否可以手动缩放页面。设置为yes允许缩放，设置为no禁止缩放。通常，允许用户缩放页面以适应他们的需求是一个好的做法，但在某些情况下，你可能希望禁止缩放。
CSS后处理器
CSS 后处理器是一种工具，它在 CSS 预处理器处理生成的 CSS 代码之后运行。其主要目的是优化和改进最终的 CSS 输出，以提高性能、浏览器兼容性和代码可维护性。
CSS 后处理器使用 JavaScript 插件（或其他编程语言编写的工具）来处理 CSS，这些插件可以解决不同的问题或执行特定任务。常见的 CSS 后处理器任务包括：
- 自动添加浏览器前缀（autoprefixer）：根据目标浏览器和其版本，自动添加适当的浏览器前缀以确保跨浏览器兼容性。
- CSS 压缩（minification）：删除 CSS 代码中的空格、换行符和注释，以减少文件大小，提高加载速度。
- 优化和合并规则（optimization）：查找和合并重复的 CSS 规则，重写代码以减少不必要的选择器和规则，从而减少文件大小和提高性能。
- 使用 CSS 变量（CSS custom properties）：将 CSS 预处理器中使用的变量转换为原生的 CSS 变量，从而在运行时更改样式。
- 实现未来 CSS 规范（future-proofing）：将尚未得到广泛支持的新 CSS 规范转换为目前可用的兼容语法，以便在不等待浏览器支持的情况下使用新功能。
PostCSS 是目前最流行的 CSS 后处理器。它提供了一个插件系统，使开发人员能够根据需要选择和配置插件。PostCSS 可以与构建工具（如 Webpack、Gulp 和 Grunt）结合使用，将后处理集成到自动化构建和部署流程中。
