2022高频前端面试题——CSS篇

近年来，前端开发领域竞争激烈，面试更是层出不穷。如何轻松应对这些面试，并脱颖而出，就显得尤为重要。针对此，我根据多年行业经验，精心整理了一份CSS面试题集锦，以助大家在面试中游刃有余。

1. px和em的区别

参考回答：

• px：像素，绝对单位，与设备无关。
• em：相对单位，相对于父元素的font-size。

2. CSS盒模型

参考回答：

• CSS盒模型由内容、内边距、边框和外边距四部分组成。
• 内容：元素的内容，如文本、图片等。
• 内边距：元素内容与边框之间的距离。
• 边框：元素的边框。
• 外边距：元素边框与其他元素的距离。

3. 浮动

参考回答：

• 浮动是一种使元素脱离正常文档流的定位方式。
• 浮动元素不会占据空间，而是会与其他元素并排排列。
• 浮动元素可以向左或向右浮动。

4. 定位

参考回答：

• 定位是一种使元素在页面中指定位置的定位方式。
• 定位元素不会脱离正常文档流，而是会占据空间。
• 定位元素可以绝对定位、相对定位或固定定位。

5. 选择器

参考回答：

• 选择器用于匹配HTML元素。
• 选择器可以是元素名称、类名、ID、属性或伪类等。
• 选择器可以组合使用，以匹配更复杂的元素。

6. 伪类

参考回答：

• 伪类是用于匹配元素状态的特殊选择器。
• 伪类可以匹配元素的悬停状态、激活状态、焦点状态等。
• 伪类可以与其他选择器组合使用，以匹配更复杂的元素。

7. 伪元素

参考回答：

• 伪元素是用于匹配元素中特定部分的特殊选择器。
• 伪元素可以匹配元素的首字母、行内元素等。
• 伪元素可以与其他选择器组合使用，以匹配更复杂的元素。

8. 动画

参考回答：

• CSS动画是一种使元素在页面中移动或改变的外观效果。
• CSS动画可以通过动画属性来实现。
• CSS动画可以持续一段时间，也可以无限循环。

9. 过渡

参考回答：

• CSS过渡是一种使元素在页面中平滑地改变外观效果。
• CSS过渡可以通过过渡属性来实现。
• CSS过渡可以持续一段时间，也可以无限循环。

10. 变形

参考回答：

• CSS变形是一种使元素在页面中改变形状或位置。
• CSS变形可以通过变形属性来实现。
• CSS变形可以使元素旋转、缩放、倾斜等。