前端 CSS 面试题共63篇

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

面试题:什么是替换元素?说说其概念及计算规则

什么是替换元素? 在 CSS 中,替换元素(Replaced Element) 是指其内容的外观和尺寸不由 CSS 直接控制,而是由外部资源或浏览器默认行为决定的 HTML 元素。 简单来说,替换元素的“内容”是“...
程序百科的头像-程序百科程序百科4个月前
256

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

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

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

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

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

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

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

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

面试题:CSS3 中的 transform 有哪些属性?

面试题:CSS3 中的 transform 有哪些属性? transform 是 CSS3 中用于对元素进行变形的强大属性,它可以在不改变文档流的情况下,对元素进行平移、旋转、缩放、倾斜等操作,广泛应用于动画、交...
程序百科的头像-程序百科程序百科4个月前
306

面试题:如何消除 inline-block 元素之间的间隙?

这是一个非常经典的 CSS 布局问题。inline-block 元素之间的间隙是由于 HTML 源码中的空白字符(空格、换行、制表符)在渲染时被当作一个空格符显示而导致的。 核心原因 当元素设置为 display: ...
程序百科的头像-程序百科程序百科4个月前
535

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

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

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

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

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

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