前端面试宝典：CSS篇

CSS 高频面试考题深入剖析

一、CSS 基础

1. CSS 选择器及其优先级

CSS 选择器是 CSS 的基石，用于从 HTML 文档中选择元素并对其应用样式。不同类型的选择器具有不同的优先级，决定了当多个选择器应用于同一元素时，哪个选择器的样式将生效。优先级顺序为：

• ID 选择器： 最高优先级（100）
• 类选择器： 次高优先级（10）
• 属性选择器： 中等优先级（1）
• 伪类选择器： 最低优先级（1）

代码示例：

/* 使用 ID 选择器（最高优先级） */
#my-element {
  color: red;
}

/* 使用类选择器（次高优先级） */
.my-class {
  font-size: 20px;
}

/* 使用属性选择器（中等优先级） */
[type="button"] {
  background-color: blue;
}

/* 使用伪类选择器（最低优先级） */
a:hover {
  text-decoration: underline;
}

2. 层叠样式表（CSS）

CSS 采用层叠样式表模型，这意味着多个样式表可以同时应用于一个页面。当有多个样式规则应用于同一元素时，将使用最具体的规则。

代码示例：

/* 外部样式表 */
body {
  font-family: Arial, sans-serif;
}

/* 内联样式（覆盖外部样式表） */
<p style="font-family: Helvetica, Arial, sans-serif;">...</p>

二、布局与定位

3. 弹性盒布局（Flexbox）

Flexbox 是 CSS 中一种强大的布局模型，允许您轻松地排列和对齐元素。Flexbox 属性包括：

• flex-direction：定义元素排列方向（水平或垂直）
• justify-content：定义元素在主轴上的对齐方式（起点、中心、终点）
• align-items：定义元素在交叉轴上的对齐方式（起点、中心、终点）

代码示例：

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

4. 网格布局（CSS Grid）

网格布局是一种更高级的布局模型，提供更精细的布局控制。网格布局属性包括：

• grid-template-columns：定义列布局
• grid-template-rows：定义行布局
• grid-gap：设置网格项目之间的间距

代码示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
}

三、样式与效果

5. CSS 变量

CSS 变量允许您定义可以在样式表中重复使用的变量。这有助于提高代码的可维护性和可重用性。

语法：

--variable-name: value;

代码示例：

--primary-color: #ff0000;

body {
  color: var(--primary-color);
}

6. 过渡与动画

过渡和动画用于在元素的样式发生变化时创建平滑的视觉效果。

• 过渡： 定义元素在样式发生变化时从一种状态过渡到另一种状态的时间和效果。
• 动画： 定义元素在一段时间内一系列变化的持续时间和效果。

代码示例：

/* 过渡 */
.element {
  transition: color 1s ease-in-out;
}

/* 动画 */
@keyframes my-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: my-animation 1s ease-in-out;
}

四、响应式设计

7. 媒体查询

媒体查询允许您根据设备或浏览器的特定功能（例如屏幕尺寸、方向或媒体类型）调整 CSS 样式。

语法：

@media (condition) {
  /* 仅当条件满足时应用的样式 */
}

代码示例：

@media (max-width: 768px) {
  /* 在屏幕宽度小于或等于 768px 时应用的样式 */
  body {
    font-size: 14px;
  }
}

五、性能优化

8. 减少 HTTP 请求

减少页面加载时间的一种方法是减少 HTTP 请求的数量。这可以通过合并 CSS 文件、使用内联样式或使用 CSS 预处理器来实现。

9. 使用 CDN

内容分发网络（CDN）通过将您的文件存储在全球各地的服务器上，可以帮助缩短加载时间并提高网站性能。

六、最新趋势

10. CSS 模块

CSS 模块是一种 CSS 规范，它将 CSS 样式封装在组件中，从而提高可重用性和可维护性。

11. CSS 变量

如前所述，CSS 变量允许您创建可以在样式表中重复使用的变量。这有助于简化样式表的维护和更新。

常见问题解答

1. CSS 选择器的优先级如何工作？

CSS 选择器的优先级由其类型决定。ID 选择器具有最高优先级，其次是类选择器、属性选择器和伪类选择器。

2. 如何使用 Flexbox 布局元素？

要使用 Flexbox 布局元素，请使用 display: flex; 属性，然后使用 flex-direction、justify-content 和 align-items 属性来控制元素的排列和对齐方式。

3. CSS 变量的语法是什么？

CSS 变量的语法为：--variable-name: value;

4. 如何使用媒体查询创建响应式设计？

要使用媒体查询创建响应式设计，请使用 @media (condition) {} 语法，其中条件是基于设备或浏览器的特定功能（例如屏幕尺寸、方向或媒体类型）。

5. 减少 HTTP 请求的最佳方法是什么？

减少 HTTP 请求的最佳方法是合并 CSS 文件、使用内联样式或使用 CSS 预处理器。