1. 什么是伪类和伪元素
伪类（
Pseudo-class）: 伪类是选择器的一种，用于选择特定状态或条件下的元素。它们以冒号（:）开头，用于向选择器添加额外的特定条件。例如，:hover伪类用于选择鼠标悬停在元素上的状态，:nth-child(n)伪类用于选择父元素下的第n个子元素等。伪元素（
Pseudo-element）: 伪元素是选择器的一种，用于在元素的特定部分上添加样式。它们以双冒号（::）开头，用于向选择器添加额外的虚拟元素。伪元素用于在文档中生成额外的内容，或者将样式应用于元素的特定部分。例如，::before伪元素用于在元素之前插入内容，::after伪元素用于在元素之后插入内容等。
伪类用于选择元素的特定状态，而伪元素用于选择元素的特定部分或位置。
2. 什么是盒模型
盒模型是指在网页布局中，每个元素被视为一个矩形的盒子，它包括内容区域、内边距、边框和外边距。这四个部分组成了一个元素的盒模型。
盒模型的属性包括：
- 宽度（
width）：元素的内容区域的宽度，不包括边框、内边距和外边距。 - 高度（
height）：元素的内容区域的高度，不包括边框、内边距和外边距。 - 边框（
border）：元素的边框，包括边框的宽度、样式和颜色。 - 内边距（
padding）：元素的内容区域与边框之间的距离，可以设置上、右、下、左四个方向的内边距。 - 外边距（
margin）：元素与其他元素之间的距离，可以设置上、右、下、左四个方向的外边距。 - 盒模型的总宽度（
box-sizing）指定元素的宽度如何计算，包括内容区域、内边距和边框，可以设置为content-box（默认值，宽度不包括内边距和边框）或者border-box（宽度包括内边距和边框）。 - 盒模型的布局方式（
display）：指定元素的布局方式，如块级元素（block）、行内元素（inline）或者行内块级元素（inline-block）。 - 盒模型的定位方式（
position）：指定元素在文档中的定位方式，如静态定位（static）、相对定位（relative）、绝对定位（absolute）或者固定定位（fixed）。 - 盒模型的堆叠顺序（
z-index）：指定元素在重叠部分的显示顺序，值越大越靠前显示。 - 盒模型的背景（
background）：指定元素的背景颜色、图片、重复方式等属性。
3. 什么是css动画以及如何应用
CSS动画是一种使用CSS属性和关键帧来创建在网页上产生动态效果的技术。通过对元素的样式属性进行逐步的变化，可以实现平滑的过渡和动画效果。CSS动画可以应用于元素的位置、大小、颜色、透明度等属性，使元素在页面上移动、旋转、淡入淡出等。
CSS动画可以通过以下几种方式实现：
- 使用
@keyframes规则：@keyframes规则定义了一个动画序列，可以在其中指定不同的关键帧，并设置相应的样式。然后通过animation属性将该动画序列应用到元素上。
@keyframes myAnimation {
0% 
