前端 CSS 面试题共63篇

CSS 是前端页面布局与样式设计的核心技术,是前端开发者的基础能力。CSS 面试题的考察重点包括选择器的优先级、盒模型、Flexbox 与 Grid 布局、响应式设计、CSS3 动画效果、媒体查询、伪类与伪元素、CSS 性能优化以及跨浏览器兼容性问题。

面试题:怎么实现网页两栏布局?

两栏布局是前端开发中最基础且常见的布局模式,通常分为两种形式: 一栏固定,一栏自适应 两栏等宽或按比例分配 以下是 多种实现方式,从传统到现代,全面覆盖,适合在面试中展示技术深度。 一...
程序百科的头像-程序百科程序百科4个月前
507

面试题:CSS 中是否存在父选择器?其背后的原因是什么?

这是一个非常深入且经典的 CSS 面试题,触及了 CSS 选择器的核心设计原理。 核心答案 在标准的、广泛支持的 CSS 中,不存在真正的“父选择器”或“祖先选择器”。 你不能直接通过一个子元素的存...
程序百科的头像-程序百科程序百科4个月前
4114

面试题:CSS 预处理器 / 后处理器是什么?为什么要使用它们?

这是一个很好的前端工程化问题。下面是对 CSS 预处理器和后处理器的详细解释: 1. CSS 预处理器 (CSS Preprocessor) 是什么?CSS 预处理器是一种扩展 CSS 语法的工具,它允许你使用更强大、更灵...
程序百科的头像-程序百科程序百科4个月前
4610

面试题:说说网页元素的层叠顺序

在网页开发中,层叠顺序(Stacking Order) 指的是当多个元素在页面上发生重叠时,浏览器如何决定哪个元素显示在上方,哪个元素显示在下方。这个顺序由 CSS 的 z-index 属性、元素的定位方式 以...
程序百科的头像-程序百科程序百科4个月前
319

面试题:CSS 中 transition 和 animation 的区别

transition(过渡)和 animation(动画)是 CSS3 中实现动态效果的两大核心机制。虽然它们都能让元素“动”起来,但在使用方式、控制能力和适用场景上有显著区别。 一、核心概念对比 特性transi...
程序百科的头像-程序百科程序百科4个月前
467

面试题:CSS 中 flex: 1 是什么意思?

在 CSS 中,flex 属性是用于 Flexbox 布局模型中的一个简写属性,它能够定义 flex 项目的扩展能力、收缩能力和基础大小。 flex: 1 这种写法实际上是一个简写形式,默认情况下它是 flex: 1 1 0 ...
程序百科的头像-程序百科程序百科4个月前
537

面试题:说说 px、em、rem 的区别及使用场景

面试题:说说 px、em、rem 的区别及使用场景 px、em、rem 是 CSS 中常用的长度单位,它们在参考基准、继承行为和响应式能力上有显著区别。理解它们的差异对于构建可维护、可访问、响应式的网页...
程序百科的头像-程序百科程序百科4个月前
588

面试题:什么是 1px 问题?如何解决 1px 问题?

这是一个经典的移动端 Web 开发面试题,涉及到物理像素、CSS 像素和设备像素比(DPR)的概念。 一、什么是 1px 问题? 1px 问题是指在高分辨率的移动设备(如 Retina 屏幕)上,使用 CSS 设置 b...
程序百科的头像-程序百科程序百科4个月前
2914

面试题:CSS 优化和提高性能的方法有哪些?

这是一个非常经典的前端性能优化问题。CSS 虽然看似简单,但不当的写法会严重影响页面渲染性能。以下是一些关键的 CSS 优化和性能提升方法,按类别进行组织: 一、选择器优化 避免使用通配符和...
程序百科的头像-程序百科程序百科4个月前
3915

面试题:什么是 margin 重叠问题?如何解决?

Margin 重叠问题(Margin Collapse)是 CSS 布局中的一个重要特性,尤其在使用块级元素时经常遇到。理解它对于精确控制页面布局至关重要。 一、什么是 margin 重叠(Margin Collapse)? 在 标...
程序百科的头像-程序百科程序百科4个月前
285