前端 CSS 面试题共63篇

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

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

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

面试题:CSS 伪元素和伪类的作用和区别?

这是一个经典的 CSS 面试题,理解伪元素和伪类的区别对于掌握 CSS 选择器至关重要。 核心区别总结 伪类 (Pseudo-classes):用于描述一个元素的特定状态或位置。它选择的是已存在的元素,但处于...
程序百科的头像-程序百科程序百科6个月前
6312

面试题:怎么实现元素的水平垂直居中?

元素的水平垂直居中是前端开发中最常见的布局需求之一。根据元素类型(块级、行内、未知尺寸、绝对定位等)和使用的技术,有多种实现方式。以下是 全面、清晰、结构化 的回答,适合在面试中展示...
程序百科的头像-程序百科程序百科6个月前
776

面试题:line-height: 100% 和 line-height: 1 有什么区别?

这是一个考察对 CSS line-height 属性计算方式深刻理解的经典面试题。虽然 100% 和 1 看似等价,但在 line-height 的上下文中,它们的行为有本质区别。 核心区别 值计算方式是否继承实际效果lin...
程序百科的头像-程序百科程序百科6个月前
366

面试题:display:inline-block 什么时候会显示间隙?

display: inline-block 元素之间出现空白间隙是一个经典的 CSS 布局问题。这个间隙并非由 margin 引起,而是由于 HTML 中的空白字符(空格、换行、制表符)在渲染时被当作“空白符”处理所导致...
程序百科的头像-程序百科程序百科6个月前
315

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

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

面试题:说说你对盒模型的理解

说说你对盒模型的理解 盒模型(Box Model) 是 CSS 布局的核心概念,它定义了每个 HTML 元素在页面上所占据的空间结构。理解盒模型是掌握网页布局的基础。 一、盒模型的组成 每一个元素都被视为...
程序百科的头像-程序百科程序百科6个月前
3311

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

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

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

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

面试题:有哪些默认 display: block 元素和 display: inline 元素?你还知道哪些 display 取值?

这是一个考察 HTML 元素默认行为和 CSS display 属性知识的面试题。回答时需要清晰分类,并展示对现代布局的理解。 一、默认 display: block 的元素 这类元素在页面中独占一行,会从新行开始,...
程序百科的头像-程序百科程序百科6个月前
4313