2024前端面试准备之CSS篇（二）

全文链接

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动画可以通过以下几种方式实现：

1. 使用@keyframes规则：@keyframes规则定义了一个动画序列，可以在其中指定不同的关键帧，并设置相应的样式。然后通过animation属性将该动画序列应用到元素上。

@keyframes myAnimation {
   
  0%