前端 CSS 面试题共63篇

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

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

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

面试题:如何用 CSS 实现一个扇形?

这是一个非常有挑战性的 CSS 面试题,考察对 CSS 形状、变换和布局的深入理解。实现一个扇形通常需要结合 border-radius、clip-path 或 transform 等技术。 核心思路 扇形是圆的一部分,由一个...
程序百科的头像-程序百科程序百科1年前
687

面试题:说说响应式设计的概念及基本原理

面试题:说说响应式设计的概念及基本原理 一、什么是响应式设计(Responsive Design)? 响应式设计(Responsive Web Design, RWD)是一种网页设计和开发方法,旨在让同一个网站在不同设备、不...
程序百科的头像-程序百科程序百科1年前
689

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

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

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

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

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

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

面试题:什么是 1px 问题?如何解决 1px 问题?

这是一个经典的移动端 Web 开发面试题,涉及到物理像素、CSS 像素和设备像素比(DPR)的概念。 一、什么是 1px 问题? 1px 问题是指在高分辨率的移动设备(如 Retina 屏幕)上,使用 CSS 设置 b...
程序百科的头像-程序百科程序百科1年前
6214

面试题:CSS 优化和提高性能的方法有哪些?

这是一个非常经典的前端性能优化问题。CSS 虽然看似简单,但不当的写法会严重影响页面渲染性能。以下是一些关键的 CSS 优化和性能提升方法,按类别进行组织: 一、选择器优化 避免使用通配符和...
程序百科的头像-程序百科程序百科1年前
6215

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

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

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

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