2.1.2.CSS3
CSS3 是 CSS（层叠样式表）的第三个版本，引入了大量的新特性和功能，大大增强了网页的表现能力。以下是 CSS3 的核心知识点，涵盖了布局、动画、特效、响应式设计等方面。
2.1.2.1.选择器和伪类
伪类选择器：
:hover, :active, :focus, :first-child, :last-child, :nth-child(), :nth-of-type(), :not(), :checked, :enabled, :disabled 等。
伪元素选择器：
::before, ::after, ::first-letter, ::first-line 等。
属性选择器：
attr=value\], \[attr\^=value\], \[attr$=value\], \[attr\*=value\] 等。
组合选择器：
\>, +, \~ 等。
###### 2.1.2.2.文本和字体
@font-face：自定义字体。
font-family：指定字体系列。
font-size、font-weight、font-style 等属性。
font-variation-settings：用于控制可变字体的不同轴（如宽度、粗细等）。
###### 2.1.2.3.盒模型
box-sizing：content-box, border-box
width, height：支持百分比、rem、em、vw、vh 等单位。
###### 2.1.2.4.背景和边框
background：支持渐变、图片等。
background-image, background-size, background-position, background-repeat, background-clip 等。
渐变背景：linear-gradient(), radial-gradient()。
border-radius：圆角边框。
box-shadow：为元素添加阴影效果。
text-shadow：为文本添加阴影效果。
###### 2.1.2.5.Flexbox（弹性布局）
display：flex, inline-flex
justify-content：对齐项目在主轴上的位置。
align-items：对齐项目在交叉轴上的位置。
align-self：单个元素的对齐方式。
flex-direction：设置主轴方向：row, column, row-reverse, column-reverse。
flex-wrap：是否换行：nowrap, wrap, wrap-reverse。
flex-grow, flex-shrink, flex-basis：控制弹性项目的伸缩。
###### 2.1.2.6.Grid（网格布局）
display：grid, inline-grid
grid-template-columns, grid-template-rows：定义列和行的大小。
grid-gap, grid-row-gap, grid-column-gap：设置网格项之间的间隔。
grid-template-areas：创建可命名区域。
grid-column, grid-row：控制元素在网格中的位置。
###### 2.1.2.7.响应式设计
media queries：根据设备或视窗的宽度、分辨率等来改变布局。
@media 规则，max-width, min-width, orientation, resolution 等。
###### 2.1.2.8.变换（Transform）
transform：支持旋转、缩放、平移和倾斜。
rotate(), scale(), translate(), skew() 等。
###### 2.1.2.9.过渡（Transition）
transition：实现元素的平滑过渡效果。
transition-property, transition-duration, transition-timing-function, transition-delay。
###### 2.1.2.10.动画（Animation）
@keyframes：定义关键帧动画。
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode。
###### 2.1.2.11.多列布局
column-count, column-gap, column-rule 等属性。
###### 2.1.2.12.边框图像
border-image：指定边框的图片，可以用来为元素的边框应用图片。
###### 2.1.2.13.自定义属性（CSS变量）
--variable-name：自定义的 CSS 变量，通过 var() 使用。
###### 2.1.2.14.滤镜（Filter）
filter：为元素应用视觉效果，如模糊、亮度、对比度等。
blur(), brightness(), contrast(), drop-shadow(), grayscale(), sepia() 等。
###### 2.1.2.15.位置
position：static, relative, absolute, fixed, sticky。
z-index：控制层叠上下文中元素的堆叠顺序。
###### 2.1.2.16.视差效果（Parallax）
使用 background-attachment: fixed; 或 CSS 动画创建视差效果。
###### 2.1.2.17.响应式字体（Viewport Units）
vw, vh, vmin, vmax：相对于视口大小的单位，常用于响应式设计。
###### 2.1.2.18.计时函数（Timing Functions）
cubic-bezier()：自定义动画的时间函数。
其他预定义函数如 ease, linear, ease-in, ease-out, ease-in-out。
###### 2.1.2.19.透明度（Opacity）
opacity：控制元素的透明度。
###### 2.1.2.20.Clip-path
clip-path：创建裁剪路径，通常用于将元素裁剪成特定形状。
###### 2.1.2.21.层叠上下文（Stacking Context）
transform, opacity, z-index 等可以创建新的层叠上下文。
###### 2.1.2.22.垂直和水平居中
使用 flexbox 或 grid 实现元素的完美居中。
###### 2.1.2.23.案例
以下是一个包含所有常见 CSS3 功能的完整示例。这个例子展示了如何在一个简单的网页中应用各种 CSS3 特性，包括布局、动画、过渡、响应式设计等。
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| \ \ \ 这是使用自定义字体的文本。\ \ \ \ |
###### 2.1.2.24.CSS使用策略
使用CSS时，有一些最佳实践可以帮助你提高代码的可维护性、性能和可读性。以下是一些重要的CSS最佳实践：
1）使用外部样式表
将CSS样式与HTML分离，使用外部样式表，而不是在HTML中直接写内联样式或嵌入样式。这样可以减少重复代码并提升加载速度。
例如，使用 \ 引入外部样式表。
2）保持样式的简洁和一致
保持CSS规则简洁、统一，并遵循命名约定（例如BEM、OOCSS、SMACSS等）。这样有助于增强代码的可维护性。
例如，使用BEM（块、元素、修饰符）命名方法：block__element--modifier。
3）避免使用 !important
除非必要，否则尽量避免使用 !important。它会导致样式优先级变得混乱，难以调试和维护。
如果确实需要，可以考虑重新组织CSS代码或使用更具特定性的选择器来解决冲突。
4）使用简洁的选择器
使用更简洁的CSS选择器来减少样式的复杂度。过于复杂的选择器可能会影响性能。
例如，避免使用过长的层级选择器（如 .header .nav .item .link），可以改用类名或ID选择器。
5）CSS模块化
将CSS拆分为多个小的、模块化的文件，每个文件负责一个独立的功能模块。可以使用工具（如Sass、Less、PostCSS等）来进行代码组织。
例如，将按钮样式放在一个文件里，将布局样式放在另一个文件里。
6）使用CSS预处理器（如Sass、Less）
CSS预处理器提供了变量、嵌套、混合、继承等功能，帮助你提高CSS代码的复用性和可维护性。
例如，使用Sass的变量来统一管理颜色、字体等：
|---------------------------------------------------------------------|
| $primary-color: #3498db; body { background-color: $primary-color; } |
7）遵循响应式设计原则
使用媒体查询（media queries）为不同设备（如手机、平板、桌面）设置不同的样式。这样可以确保你的页面在各种设备上都能良好显示。
|----------------------------------------------------------------------|
| @media (max-width: 768px) { .container { flex-direction: column; } } |
8）避免过度嵌套
CSS嵌套过多会增加复杂度，降低可读性和性能。特别是在预处理器中，嵌套层级不宜超过3层。
例如，避免：
|-------------------------------------------------------|
| .header { .nav { .item { .link { color: blue; } } } } |
9）使用自定义属性（CSS变量）
CSS变量使得你可以在整个CSS中重用相同的值，增强代码的可维护性，并能够更轻松地进行主题切换。
例如：
|-----------------------------------------------------------------------------------|
| :root { --main-color: #3498db; } .button { background-color: var(--main-color); } |
10）减少不必要的动画
动画和过渡效果能为用户体验增色，但过度的动画会影响性能，尤其是在低性能设备上。因此，保持动画简洁，并优化其性能。
使用 will-change 提前告诉浏览器哪些元素会发生变化，以优化渲染性能。
11）避免重复的样式
识别和消除重复的样式。可以使用工具（如CSS压缩工具）来自动优化代码，并减少冗余。
例如，多个选择器使用相同样式时，合并它们：
|---------------------------------------------------|
| .btn, .button { padding: 10px; font-size: 16px; } |
12）利用浏览器开发者工具调试
浏览器的开发者工具（如Chrome DevTools）可以帮助你快速调试和修改CSS样式，查看实时效果。养成使用这些工具调试的习惯。
13）使用Flexbox和Grid布局
对于复杂的布局，Flexbox和CSS Grid是现代浏览器中非常强大且灵活的布局工具。它们能简化许多传统布局方法（如浮动布局）的复杂性。
例如，使用Flexbox来做垂直居中：
|-----------------------------------------------------------------------------|
| .container { display: flex; justify-content: center; align-items: center; } |