前端 CSS 面试题共63篇

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

面试题:CSS display 属性值 block、inline 和 inline-block 的区别

这是一个非常基础且重要的 CSS 面试题,考察对盒模型和元素布局行为的理解。 核心区别总结 这三种 display 值决定了元素在页面流中的布局行为,主要体现在以下几个方面: 是否独占一行 能否设置...
程序百科的头像-程序百科程序百科6个月前
4812

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

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

面试题:说说你对 BFC 的理解,如何创建 BFC?

你对 BFC 的理解,以及如何创建 BFC? BFC(Block Formatting Context),即 块级格式化上下文,是 CSS 渲染中一个重要的概念。它是页面中的一块独立的渲染区域,规定了内部块级元素如何布局,...
程序百科的头像-程序百科程序百科6个月前
4811

面试题:有哪些 CSS 选择器?请分别介绍

CSS 选择器是用于“选中”HTML元素并为其应用样式的模式。掌握各种选择器是精准控制页面样式的前提。以下是 CSS 中主要的选择器类型及其详细介绍。 一、基础选择器 1. 元素选择器(Type Selecto...
程序百科的头像-程序百科程序百科6个月前
4710

面试题:CSS 的 position 有哪些属性值,区别是什么?

position 是 CSS 中控制元素定位的核心属性,它决定了元素如何在页面中放置。共有 5 个标准属性值,每个都有独特的定位行为。 1. static (默认值) 行为: 元素按照正常的文档流(Normal Documen...
程序百科的头像-程序百科程序百科6个月前
4714

面试题:z-index 属性在什么情况下会失效?

z-index 是 CSS 中用于控制元素堆叠顺序(stacking order)的重要属性,数值越大,元素越“靠前”。但 z-index 并非在所有情况下都生效。以下是 z-index 失效的常见场景及其原理,适合在面试中...
程序百科的头像-程序百科程序百科6个月前
4614

面试题:如果在伪元素中不写 content 会发生什么?

这是一个考察对 CSS 伪元素 (::before 和 ::after) 基础规则理解的面试题。 核心答案 如果在 ::before 或 ::after 伪元素中不写 content 属性,或者将 content 设置为 none,那么该伪元素将: ...
程序百科的头像-程序百科程序百科6个月前
4615

面试题:::before 和 :after 的双冒号和单冒号有什么区别?

在CSS中,::before 和 ::after 伪元素的双冒号(::)和单冒号(:)在功能上没有区别,它们的作用完全相同。 两者之间的区别主要在于语法规范的演进和浏览器兼容性: CSS3 规范的区分: 在 CSS3 ...
程序百科的头像-程序百科程序百科6个月前
466

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

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

面试题:说说你对 CSS Sprites 的理解

说说你对 CSS Sprites 的理解 CSS Sprites(CSS 雪碧图、CSS 精灵图)是一种将多个小图片合并成一张大图,然后通过 CSS 的 background-image、background-position 等属性来显示其中特定部分的...
程序百科的头像-程序百科程序百科6个月前
4413