CSS3的视觉类样式
视觉类样式不会对元素的大小进行影响，属性如下：
注意点：
- 一个阴影属性可以设置多层，前一个可以覆盖后一个；
- 对于一个元素的样式，应该首先使用这些方法而不是padding或border-size来解决；
CSS3的过渡和动画
过渡和动画无法对所有的css属性产生影响，能够产生影响的只有数值类属性，属性如下：
注意点：在js中可以通过监听元素的transitionstart和transitionend事件，在动画过渡前后做一些处理。
CSS3的布局
弹性布局
默认情况下，弹性盒子内的子元素沿着主轴依次排列，侧轴拉伸，其主要应该属性如下：
flex-direction：可以改变主轴方向
justify-content：可以影响主轴的排列方式
align-items：可以影响侧轴的排列方式
flex：可以设置拉伸和压缩比例（拉伸比例，压缩比例，初始尺寸）
flex-wrap：主轴换行
gap：子元素间距
网格布局
默认情况下，网格盒子内的子元素从左到右边依次排列，侧轴拉伸，其主要应该属性如下：
grid-auto-flow：改变排列方向
gap：单元格间距
justify-content：可以影响水平的排列方式
align-items：可以影响垂直的排列方式
grid-area：网关子元素定位（起始行线编号/起始列线编号/结束行线编号/结束列线编号）
其他属性
box-sizing：可以设置内容盒子和边框盒
object-fit：可以控制多媒体元素的适应方式
视口单位：vh和vw
伪元素选择器：【::before】和【::after】
scroll-behavior：可以让滚动更加丝滑
@font-face指令：可以让我们加载字体，可以配合图标库去加载字体图标