2025年Top 30 CSS面试题及答案

作者头像东城·2026-01-31 23:24:32·
概述
CSS（层叠样式表）是构建美观、响应式网站的关键技术。无论您是在准备前端开发者面试还是复习知识，这里都有一份精心挑选的2025年每个开发者都应该知道的30个CSS面试题及答案。
✅ 1. 什么是CSS？
CSS（层叠样式表）是一种用于样式化HTML文档的语言。它控制布局、颜色、间距、字体等。
✅ 2. CSS有哪些类型？
内联CSS – 直接添加到HTML元素中
内部CSS – 写在head部分的<style>标签内
外部CSS – 写在单独的.css文件中，使用`<link>链接
✅ 3. CSS中的盒模型是什么？
CSS盒模型包含：
内容（Content）
内边距（Padding）
边框（Border）
外边距（Margin）
它描述了元素如何被调整大小和间距。
✅ 4. id和class有什么区别？
ID是唯一的，使用#
Class可以重复使用，使用.
  1. #main { } /* ID选择器 */
  2. .container { } /* 类选择器 */
css
✅ 5. CSS中的特异性是什么？
特异性决定当多个规则匹配一个元素时应用哪个样式规则。
优先级顺序：
内联样式
ID选择器
类/伪类/属性选择器
标签选择器
✅ 6. z-index是什么？
z-index控制元素的堆叠顺序。较高的值显示在较低值之上。
  1. .modal {
  2. z-index: 999;
  3. }
css
✅ 7. visibility: hidden和display: none有什么区别？
visibility: hidden：元素被隐藏但占用空间
display: none：元素从文档流中移除
✅ 8. 解释em、rem和px的区别。
px – 绝对单位
em – 相对于父元素的字体大小
rem – 相对于根元素（html）的字体大小
✅ 9. CSS中的伪类是什么？
伪类根据状态样式化元素。
示例：
:hover
:first-child
:nth-child(3)
✅ 10. absolute、relative、fixed和sticky有什么区别？
定位
描述
relative
相对于其正常位置
absolute
相对于最近的定位祖先元素
fixed
相对于视口
sticky
根据滚动在relative和fixed之间切换
✅ 11. Flexbox如何工作？
Flexbox用于一维布局（行或列）。
  1. .container {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }
css
✅ 12. 什么是CSS Grid？
Grid是用于行和列的二维布局系统。
  1. .container {
  2. display: grid;
  3. grid-template-columns: repeat(3, 1fr);
  4. }
css
✅ 13. 什么是伪元素？
伪元素样式化元素的特定部分。
示例：
::before
::after
✅ 14. 什么是媒体查询？
媒体查询通过根据设备宽度应用样式来使设计响应式。
  1. @media (max-width: 768px) {
  2. .menu { display: none; }
  3. }
css
✅ 15. CSS中的组合器是什么？
组合器定义选择器之间的关系：
后代选择器（div p）
子选择器（div > p）
相邻兄弟选择器（div + p）
通用兄弟选择器（div ~ p）
✅ 16. 如何居中一个div？
使用Flexbox：
  1. .parent {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }
css
✅ 17. CSS中的默认定位是什么？
默认定位是static。
✅ 18. CSS中calc()的用途是什么？
calc()允许数学表达式。
  1. width: calc(100% - 50px);
css
✅ 19. !important的用途是什么？
它覆盖所有其他样式，无论特异性如何。
  1. color: red !important;
css
✅ 20. 如何只在移动设备上隐藏元素？
  1. @media (max-width: 600px) {
  2. .hide-on-mobile {
  3. display: none;
  4. }
  5. }
css
✅ 21. inline、block和inline-block有什么区别？
inline – 不允许宽度/高度
block – 占据全宽
inline-block – 像inline，但支持宽度/高度
✅ 22. 如何用CSS制作三角形？
  1. .triangle {
  2. width: 0;
  3. height: 0;
  4. border-left: 20px solid transparent;
  5. border-right: 20px solid transparent;
  6. border-bottom: 20px solid red;
  7. }
css
✅ 23. 什么是供应商前缀？
用于跨浏览器兼容性。
示例：
-webkit-
-moz-
-ms-
✅ 24. CSS中的过渡如何工作？
  1. .button {
  2. transition: background 0.3s ease;
  3. }
css
✅ 25. 动画与过渡有什么区别？
过渡 – 从一种状态到另一种状态
动画 – 通过关键帧的多种状态
  1. @keyframes slide {
  2. from { left: 0; }
  3. to { left: 100px; }
  4. }
css
✅ 26. min-width、max-width和width有什么区别？
min-width：允许的最小宽度
max-width：允许的最大宽度
width：固定或相对宽度
✅ 27. unset做什么？
它根据上下文将属性重置为继承或初始值。
✅ 28. 什么是堆叠上下文？
堆叠上下文决定元素如何与z-index分层。
✅ 29. initial和inherit有什么区别？
initial：重置为默认浏览器值
inherit：从父元素获取值
✅ 30. 如何使用CSS变量？
  1. :root {
  2. --main-color: #ff6600;
  3. }
  4. .button {
  5. background-color: var(--main-color);
  6. }
css
详细解释和示例
1. CSS盒模型详解
  1. /* 标准盒模型 */
  2. .box {
  3. width: 200px;
  4. height: 100px;
  5. padding: 20px;
  6. border: 5px solid #333;
  7. margin: 10px;
  8. box-sizing: content-box; /* 默认值 */
  9. }

  11. /* IE盒模型 */
  12. .box-ie {
  13. width: 200px;
  14. height: 100px;
  15. padding: 20px;
  16. border: 5px solid #333;
  17. margin: 10px;
  18. box-sizing: border-box;
  19. }
css
2. Flexbox布局示例
  1. /* 基础Flexbox容器 */
  2. .flex-container {
  3. display: flex;
  4. flex-direction: row; /* 默认值：水平排列 */
  5. justify-content: space-between; /* 主轴对齐 */
  6. align-items: center; /* 交叉轴对齐 */
  7. flex-wrap: wrap; /* 换行 */
  8. }

  10. /* Flexbox项目 */
  11. .flex-item {
  12. flex: 1; /* 弹性增长 */
  13. flex-shrink: 1; /* 弹性收缩 */
  14. flex-basis: auto; /* 基础大小 */
  15. }
css
3. CSS Grid布局示例
  1. /* 基础Grid容器 */
  2. .grid-container {
  3. display: grid;
  4. grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
  5. grid-template-rows: 100px 200px; /* 2行固定高度 */
  6. gap: 20px; /* 网格间距 */
  7. grid-template-areas:
  8. "header header header"
  9. "sidebar main main"
  10. "footer footer footer";
  11. }

  13. /* Grid项目 */
  14. .grid-item {
  15. grid-area: main; /* 指定网格区域 */
  16. }
css
4. 响应式设计示例
  1. /* 移动优先的响应式设计 */
  2. .container {
  3. width: 100%;
  4. padding: 10px;
  5. }

  7. /* 平板设备 */
  8. @media (min-width: 768px) {
  9. .container {
  10. width: 750px;
  11. margin: 0 auto;
  12. padding: 20px;
  13. }
  14. }

  16. /* 桌面设备 */
  17. @media (min-width: 1024px) {
  18. .container {
  19. width: 970px;
  20. padding: 30px;
  21. }
  22. }

  24. /* 大屏幕设备 */
  25. @media (min-width: 1200px) {
  26. .container {
  27. width: 1170px;
  28. }
  29. }
css
5. CSS动画示例
  1. /* 关键帧动画 */
  2. @keyframes fadeIn {
  3. 0% {
  4. opacity: 0;
  5. transform: translateY(20px);
  6. }
  7. 100% {
  8. opacity: 1;
  9. transform: translateY(0);
  10. }
  11. }

  13. /* 应用动画 */
  14. .animated-element {
  15. animation: fadeIn 0.5s ease-out;
  16. animation-fill-mode: both; /* 保持最终状态 */
  17. }

  19. /* 悬停动画 */
  20. .button {
  21. transition: all 0.3s ease;
  22. }

  24. .button:hover {
  25. transform: scale(1.05);
  26. box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  27. }
css
6. CSS变量和主题
  1. /* 定义CSS变量 */
  2. :root {
  3. --primary-color: #007bff;
  4. --secondary-color: #6c757d;
  5. --success-color: #28a745;
  6. --danger-color: #dc3545;
  7. --font-family: 'Arial', sans-serif;
  8. --border-radius: 4px;
  9. --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  10. }

  12. /* 使用变量 */
  13. .button {
  14. background-color: var(--primary-color);
  15. border-radius: var(--border-radius);
  16. font-family: var(--font-family);
  17. box-shadow: var(--box-shadow);
  18. }

  20. /* 深色主题 */
  21. [data-theme="dark"] {
  22. --primary-color: #0056b3;
  23. --secondary-color: #495057;
  24. --box-shadow: 0 2px 4px rgba(255,255,255,0.1);
  25. }
css
7. 现代CSS技术
  1. /* CSS Grid自动布局 */
  2. .auto-grid {
  3. display: grid;
  4. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  5. gap: 20px;
  6. }

  8. /* CSS自定义属性计算 */
  9. .dynamic-sizing {
  10. width: calc(100vw - 2rem);
  11. height: calc(100vh - 100px);
  12. margin: calc(1rem + 2px);
  13. }

  15. /* CSS逻辑属性 */
  16. .logical-properties {
  17. margin-block: 1rem; /* 垂直边距 */
  18. margin-inline: 2rem; /* 水平边距 */
  19. padding-block-start: 1rem; /* 顶部内边距 */
  20. padding-inline-end: 1rem; /* 右侧内边距 */
  21. }
css
面试技巧
1. 准备实际项目示例
准备2-3个你参与过的项目
能够解释你使用的CSS技术
准备遇到的挑战和解决方案
2. 理解核心概念
盒模型和布局
选择器和特异性
响应式设计原则
性能优化
3. 实践编码问题
练习居中元素的不同方法
理解Flexbox和Grid的使用场景
掌握媒体查询的编写
4. 关注最新趋势
CSS Grid和Flexbox
CSS变量
现代布局技术
性能优化技巧
总结
掌握CSS对每个前端开发者来说都是必不可少的。这30个问题涵盖了从基础到高级的所有主题，帮助您在2025年破解面试并提升样式技能。
记住，CSS不仅仅是语法，更是理解如何创建美观、可维护和响应式用户界面的艺术。