前端 CSS 面试题共63篇

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

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

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

面试题:Sass、Less 是什么?为什么要使用它们?

Sass 和 Less 都是 CSS 预处理器(CSS Preprocessors),它们扩展了 CSS 的功能,通过引入编程特性(如变量、嵌套、混合、函数等),让 CSS 更强大、更易维护、更适合团队协作和大型项目开发。 ...
程序百科的头像-程序百科程序百科2个月前
4814

面试题:为什么 li 与 li 元素之间有看不见的空白间隔?如何解决?

这是一个非常经典且在实际开发中频繁遇到的 HTML/CSS 问题。这个问题的本质是HTML 中的空白字符(whitespace)在特定布局模式下被渲染成了可视的空白。 一、问题原因 <li> 元素之间出现看...
程序百科的头像-程序百科程序百科2个月前
3614

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

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

面试题:利用 CSS 隐藏元素的方法有哪些?

在 CSS 中,有多种方法可以隐藏元素,每种方法的行为、对布局的影响、性能和可访问性都不同。选择合适的方法取决于具体需求。 一、主要的隐藏方法 以下是常用的 CSS 隐藏元素的方式,按行为分类...
程序百科的头像-程序百科程序百科2个月前
2313

面试题:什么是物理像素,逻辑像素和像素密度?为什么在移动端开发时需要用到 @3x, @2x 这种图片?

这是一个关于前端响应式设计和高分辨率屏幕适配的核心问题。下面详细解释这些概念及其在移动端开发中的应用。 一、核心概念解析 1. 物理像素 (Physical Pixels) 定义:物理像素是显示屏上真实存...
程序百科的头像-程序百科程序百科2个月前
7113

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

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

面试题:CSS 如何快速选取同组兄弟元素的偶数序号元素?

这是一个考察对 CSS 选择器,特别是结构性伪类掌握程度的面试题。 最快速、最直接的方法是使用 :nth-child(even) 伪类选择器。 核心答案 /* 选取父元素下所有偶数位置的同组兄弟元素 */ .parent...
程序百科的头像-程序百科程序百科2个月前
2613

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

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

面试题:display:none 与 visibility:hidden 的区别

display: none 和 visibility: hidden 都可以隐藏 HTML 元素,但它们在行为、对布局的影响以及性能上有着本质的区别。理解这些差异对于精确控制页面显示和布局至关重要。 一、核心区别对比 特性...
程序百科的头像-程序百科程序百科2个月前
2613