2025年Top 30 CSS面试题及答案
东城
·2026-01-31
概述
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可以重复使用，使用.
#main { } /* ID选择器 */
.container { } /* 类选择器 */
css
✅ 5. CSS中的特异性是什么？
特异性决定当多个规则匹配一个元素时应用哪个样式规则。
优先级顺序：
内联样式
ID选择器
类/伪类/属性选择器
标签选择器
✅ 6. z-index是什么？
z-index控制元素的堆叠顺序。较高的值显示在较低值之上。
.modal {
z-index: 999;
}
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用于一维布局（行或列）。
.container {
display: flex;
justify-content: center;
align-items: center;
}
css
✅ 12. 什么是CSS Grid？
Grid是用于行和列的二维布局系统。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
css
✅ 13. 什么是伪元素？
伪元素样式化元素的特定部分。
示例：
::before
::after
✅ 14. 什么是媒体查询？
媒体查询通过根据设备宽度应用样式来使设计响应式。
@media (max-width: 768px) {
.menu { display: none; }
}
css
✅ 15. CSS中的组合器是什么？
组合器定义选择器之间的关系：
后代选择器（div p）
子选择器（div > p）
相邻兄弟选择器（div + p）
通用兄弟选择器（div ~ p）
✅ 16. 如何居中一个div？
使用Flexbox：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
css
✅ 17. CSS中的默认定位是什么？
默认定位是static。
✅ 18. CSS中calc()的用途是什么？
calc()允许数学表达式。
width: calc(100% - 50px);
css
✅ 19. !important的用途是什么？
它覆盖所有其他样式，无论特异性如何。
color: red !important;
css
✅ 20. 如何只在移动设备上隐藏元素？
@media (max-width: 600px) {
.hide-on-mobile {
display: none;
}
}
css
✅ 21. inline、block和inline-block有什么区别？
inline – 不允许宽度/高度
block – 占据全宽
inline-block – 像inline，但支持宽度/高度
✅ 22. 如何用CSS制作三角形？
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;
}
css
✅ 23. 什么是供应商前缀？
用于跨浏览器兼容性。
示例：
-webkit-
-moz-
-ms-
✅ 24. CSS中的过渡如何工作？
.button {
transition: background 0.3s ease;
}
css
✅ 25. 动画与过渡有什么区别？
过渡 – 从一种状态到另一种状态
动画 – 通过关键帧的多种状态
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}
css
✅ 26. min-width、max-width和width有什么区别？
min-width：允许的最小宽度
max-width：允许的最大宽度
width：固定或相对宽度
✅ 27. unset做什么？
它根据上下文将属性重置为继承或初始值。
✅ 28. 什么是堆叠上下文？
堆叠上下文决定元素如何与z-index分层。
✅ 29. initial和inherit有什么区别？
initial：重置为默认浏览器值
inherit：从父元素获取值
✅ 30. 如何使用CSS变量？
:root {
--main-color: #ff6600;
}
.button {
background-color: var(--main-color);
}
css
详细解释和示例
1. CSS盒模型详解
/* 标准盒模型 */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
box-sizing: content-box; /* 默认值 */
}

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

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

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

/* 平板设备 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 20px;
}
}

/* 桌面设备 */
@media (min-width: 1024px) {
.container {
width: 970px;
padding: 30px;
}
}

/* 大屏幕设备 */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
css
5. CSS动画示例
/* 关键帧动画 */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

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

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

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

/* 使用变量 */
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
font-family: var(--font-family);
box-shadow: var(--box-shadow);
}

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

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

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