web前端面试系列: CSS常见面试题
以下是一份涵盖基础与进阶知识的Web前端CSS面试题及参考答案,共20题:
一、基础概念
1. 什么是盒模型(Box Model)?标准盒模型与替代盒模型的区别?
答案
盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
- 标准盒模型:元素的宽度(
width
)仅指内容宽度,总宽度 =width + padding + border + margin
。 - 替代盒模型(
box-sizing: border-box
):元素的宽度包含内容、内边距和边框,总宽度 =width(已含padding和border) + margin
。
2. CSS选择器优先级如何计算?
答案
优先级从高到低:
!important
- 内联样式(
style=""
) - ID选择器(
#id
) - 类/伪类/属性选择器(
.class
,:hover
,[type="text"]
) - 元素/伪元素选择器(
div
,::before
) - 通配符/继承样式(
*
)
同级别时,后定义的样式覆盖前者。
二、布局相关
3. 如何实现元素水平垂直居中?
答案
- Flexbox:
.parent { display: flex; justify-content: center; align-items: center; }
- Grid:
.parent { display: grid; place-items: center; }
- 绝对定位 + 平移:
.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
4. Flexbox中flex: 1
的含义是什么?
答案
flex: 1
是 flex-grow: 1
、flex-shrink: 1
、flex-basis: 0%
的简写。表示元素会根据容器空间伸缩,占满剩余空间。
5. Grid布局中fr
单位的作用?
答案
fr
(Fractional Unit)按比例分配容器剩余空间。例如 grid-template-columns: 1fr 2fr;
表示两列宽度比例为1:2。
三、响应式设计
6. 如何实现移动端适配?
答案
- 使用视口标签:
<meta name="viewport" content="width=device-width, initial-scale=1">
- 媒体查询(
@media
)根据屏幕尺寸应用不同样式。 - 使用相对单位(
rem
、vw
)替代固定单位(px
)。
7. 媒体查询(Media Query)的常见应用场景?
答案
根据设备特性(如屏幕宽度、方向、分辨率)调整样式,例如:
@media (max-width: 768px) {
/* 移动端样式 */
}
四、进阶特性
8. 什么是BFC(块级格式化上下文)?如何触发?
答案
BFC是独立的渲染区域,内部元素布局不影响外部。触发方式:
float
不为none
overflow
不为visible
display: inline-block/table-cell/flex
position: absolute/fixed
9. CSS动画中transition
和animation
的区别?
答案
- transition:简单过渡效果,需要触发条件(如
:hover
),定义开始和结束状态。 - animation:通过
@keyframes
定义复杂动画,可自动播放、循环、控制中间状态。
10. 如何优化CSS性能?
答案
- 减少选择器复杂度(如避免嵌套过深)
- 使用
transform
和opacity
触发GPU加速 - 避免频繁重排(如减少直接修改
width
) - 压缩CSS文件,合并重复代码
五、常见问题
11. 如何清除浮动?
答案
- 父元素添加
overflow: auto/hidden
- 使用伪元素:
.clearfix::after { content: ""; display: block; clear: both; }
12. display: none
与visibility: hidden
的区别?
答案
display: none
:元素不占据空间,无法交互,触发重排。visibility: hidden
:元素占据空间,无法交互,触发重绘。
六、其他
13. CSS预处理器(如Sass/Less)的优势?
答案
- 变量、嵌套语法、混合(Mixin)、函数等特性提升代码复用性。
- 支持模块化开发,便于维护。
14. 伪类(Pseudo-class)与伪元素(Pseudo-element)的区别?
答案
- 伪类:选择元素的特定状态(如
:hover
,:nth-child(n)
)。 - 伪元素:创建虚拟元素(如
::before
,::first-line
)。
完整题目列表(共20题)
- 盒模型及两种模型的区别
- CSS选择器优先级计算
- 水平垂直居中实现方案
flex: 1
的含义- Grid中
fr
单位的作用 - 移动端适配方法
- 媒体查询的应用场景
- BFC的概念与触发方式
transition
与animation
区别- CSS性能优化方法
- 清除浮动的方案
display: none
与visibility: hidden
区别- CSS预处理器的优势
- 伪类与伪元素的区别
- 实现等高列布局的方法
position
属性的值及其特点- CSS变量(Custom Properties)的使用
- 如何实现1像素边框(Retina屏)?
- 解释CSS Sprites技术及其优缺点
- CSS模块化的解决方案(如CSS Modules、CSS-in-JS)。
以上问题覆盖了CSS的核心知识点,可根据实际需求扩展或调整难度。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2022-02-19 Express - 使用路由
2022-02-19 Express - 使用中间件
2022-02-19 Express - 使用express进行web开发