前端 CSS 面试题共63篇

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

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

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

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

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

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

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

面试题:为什么有时候用 translate 来改变位置而不是定位?

这是一个关于 CSS 性能优化和渲染机制 的核心问题。使用 transform: translate() 而不是传统的 position(如 top/left)来改变元素位置,主要是出于性能和渲染效率的考虑。 下面详细解释原因: ...
程序百科的头像-程序百科程序百科1年前
745

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

三栏布局是前端开发中常见的经典布局模式,通常指左右两栏固定宽度,中间一栏自适应(圣杯布局或双飞翼布局)。以下是多种实现方式,从传统到现代,全面覆盖。 一、什么是三栏布局? 左侧栏:固...
程序百科的头像-程序百科程序百科1年前
726

面试题:flex-shrink 和 flex-grow 的默认值是多少?作用是什么?

这是一个深入考察 CSS Flexbox 布局核心机制的面试题。理解 flex-grow 和 flex-shrink 的默认值及其作用,是掌握弹性布局的关键。 默认值 flex-grow 的默认值是 0。 flex-shrink 的默认值是 1。...
程序百科的头像-程序百科程序百科1年前
7214

面试题:如何在浏览器可视区域画一个最大的正方形?

这是一个考察对 CSS 布局、视口单位和响应式设计理解的面试题。 目标是创建一个在任何屏幕尺寸下都尽可能大,且保持为正方形,并完全位于可视区域内的元素。 核心思路 要画一个“最大”的正方形...
程序百科的头像-程序百科程序百科1年前
715

面试题:说说你对 CSS 工程化的理解

CSS 工程化是指将 软件工程的思想和方法 应用于 CSS 开发中,以解决传统 CSS 开发中存在的维护困难、命名冲突、复用性差、性能问题和团队协作障碍等痛点。 其核心目标是提升 CSS 代码的 可维护...
程序百科的头像-程序百科程序百科1年前
7015

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

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

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

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