前端 CSS 面试题共63篇

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

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

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

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

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

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

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

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

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

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

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

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

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

面试题:使用 link 和 @import 引用 CSS 的区别

在 HTML 中引入外部 CSS 样式表有两种主要方式:使用 <link> 标签和在 CSS 文件中使用 @import 规则。虽然它们都能加载样式,但在性能、兼容性、功能和使用场景上存在显著差异。 一、核心...
程序百科的头像-程序百科程序百科6个月前
5012

面试题:CSS 的 flex 布局有什么好处?

这是一个非常经典且重要的 CSS 面试题,考察对现代布局技术的理解。Flexbox(弹性盒子布局)是 CSS3 中引入的强大布局模型,它极大地简化了复杂布局的实现。 核心好处总结 Flexbox 的主要优势在...
程序百科的头像-程序百科程序百科6个月前
648

面试题:常见的 CSS 布局单位有哪些?

面试题:常见的 CSS 布局单位有哪些? CSS 提供了丰富的长度和布局单位,用于控制元素的尺寸、间距、字体等。根据使用场景,这些单位可分为 绝对单位 和 相对单位 两大类。掌握它们的特性有助于...
程序百科的头像-程序百科程序百科6个月前
598

面试题:如何给网页设置小于 12px 的字体?

这是一个关于浏览器限制和现代 CSS 特性的面试题。传统上,浏览器(特别是早期的 WebKit 内核)会对字体大小设置下限(通常为 12px),但现代解决方案已经非常成熟。 核心答案 在现代浏览器中,...
程序百科的头像-程序百科程序百科6个月前
4315