前端 CSS 面试题共63篇

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

面试题:说说你对 line-height 的理解及其赋值方式

line-height 是 CSS 中用于设置行高(即文本行之间的空间)的属性。它对文本的可读性和布局有着重要影响。下面从几个方面来详细解释 line-height 及其赋值方式。 理解 line-height 定义与作用:...
程序百科的头像-程序百科程序百科1年前
847

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

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

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

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

面试题:预处理器如 scss 和 less,与 CSS 有什么区别?

这是一个考察对现代前端开发工具理解的面试题。SCSS (Sass) 和 LESS 是 CSS 预处理器,它们扩展了 CSS 的功能,提供了更强大、更高效的编写方式,但最终都需要“编译”成普通的 CSS 文件才能被...
程序百科的头像-程序百科程序百科1年前
15112

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

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

面试题:如何在网页中画一条 0.5px 的线?

这是一个与“1px 问题”紧密相关的经典移动端 CSS 面试题,考察对高分辨率屏幕渲染和 CSS 技巧的理解。 核心答案 在现代浏览器中,可以直接使用 border 或 height 设置为 0.5px 来绘制一条 0.5p...
程序百科的头像-程序百科程序百科1年前
6111

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

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

面试题:使用 clear 属性清除浮动的原理?

面试题:使用 clear 属性清除浮动的原理? clear 属性是 CSS 中用于控制元素与浮动元素之间位置关系的重要属性,常用于“清除浮动”或“避免内容环绕浮动元素”。理解其原理对于掌握传统布局方...
程序百科的头像-程序百科程序百科1年前
425

面试题:CSS 中 display 属性的值及其作用

display 是 CSS 中最核心、最常用的属性之一,它决定了元素的布局类型和在文档流中的表现形式。理解 display 的各种取值是掌握网页布局的基础。 一、主要取值分类 display 属性的值可以分为几大...
程序百科的头像-程序百科程序百科1年前
609

面试题:如何检测 CSS 动画的 FPS 值?

这是一个非常深入且专业的前端性能面试题,考察对浏览器渲染机制、性能分析工具和动画优化的理解。 核心要点:FPS(Frames Per Second,每秒帧数)是衡量动画流畅度的关键指标。 理想的动画 FPS...
程序百科的头像-程序百科程序百科1年前
1428