前端 CSS 面试题共63篇

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

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

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

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

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

面试题:说说你对 Flex 布局的理解及其使用场景

一、对 Flex 布局的理解 Flexbox(Flexible Box Layout),即 弹性盒子布局,是 CSS3 提供的一种一维布局模型,专门用于在容器和子元素之间高效地分配空间,即使子元素尺寸未知或动态变化,也能...
程序百科的头像-程序百科程序百科7个月前
5014

面试题:说说 CSS 中 position: absolute 与 fixed 的共同点和区别

这是一个考察 CSS 定位机制核心知识的经典面试题。理解 absolute 和 fixed 的异同,是掌握页面布局的关键。 共同点 脱离文档流 (Removed from Normal Flow): 两者都会使元素完全脱离正常的文档...
程序百科的头像-程序百科程序百科7个月前
505

面试题:CSS 中 display、float、position 的关系是什么?

这是一个深入理解 CSS 布局机制的高级面试题。display、float 和 position 都能影响元素的盒模型生成和布局,它们之间存在复杂的优先级和相互覆盖关系。 核心原则 CSS 规范定义了当一个元素同时...
程序百科的头像-程序百科程序百科7个月前
4912

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

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

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

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

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

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

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

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

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

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