课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第6章 更上一层楼 - 完成 Menu 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

6-4 添加 Menu 样式

课程收获：

主要总结起来有以下几点：

SVG的使用

最早通过<img>标签来引用图标（每个图标一个文件）

为了节省请求，提出了Sprites的概念，即 将多个图标合并在一起，使用一个图片文件 ，借助background相关的属性来实现图标

图片毕竟是位图，面对多种设备终端，或者说更易于控制图标颜色和大小，开始在使用 Icon Font 来制作Web图标

当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题，比如说跨域问题，字体加载问题

随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显

SVG和img有点类似，我们也可以借助<symbol>标签和<use>标签，将所有的SVG图标拼接在一起，有点类似于Sprites的技术，只不过在此称为SVG Sprites

滚动特性

自定义滚动条的外观

scroll-behavior指定容器滚动行为，让滚动效果更丝滑

overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透

滚动捕捉

自定义属性

CSS没有变量，没有变量，没有变量；只有自定义属性，只有自定义属性，只有自定义属性！

CSS自定义属性在W3C规范是独立的一个模块，目前是 Level 1版本（CSS Custom Properties for Cascading Variables Module Level）（https://www.w3.org/TR/css-variables/），另外还有一个Level 2版本（https://fremycompany.com/TR/2012/ED-css-custom/）（目前处于ED阶段）。该特性虽然在CSS中的历史不长，但很多开发者都非常这个特性，在Youtuebe和Facebook页面上都可以看到它们的影子：

Web Layout

早期的table布局，接着的float和position相关的布局，多列布局，Flexbox布局和Grid布局等。Flexbox和Grid的出现，Web布局的灵活性越来越高。

CSS-Tricks这次大胆的使用了CSS Grid布局：

混合模式和滤镜

CSS混合模式（https://www.w3.org/TR/compositing-1/）和滤镜（https://www.w3.org/TR/filter-effects-1/）主要是用来处理图片的。这个有点类似于图像编辑软件一些功能

其他

渐变文本和边框

CSS片段模板

CSS计数器

clip-path

object-fit

书写模式writing-mode

自定义元素