前端 CSS 面试题共63篇

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

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

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

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

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

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

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

面试题:如何计算 CSS 的优先级?

CSS 优先级(Specificity)是浏览器用来决定当多个规则作用于同一个元素时,哪个样式生效的机制。理解优先级对于解决样式冲突至关重要。 一、优先级计算规则 CSS 优先级由四部分组成,通常表示...
程序百科的头像-程序百科程序百科2个月前
357

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

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

面试题:说说你对媒体查询的理解?

媒体查询(Media Queries) 是 CSS3 中的一项核心技术,它允许开发者根据设备的特性(如屏幕宽度、高度、分辨率、方向、颜色等)来有条件地应用 CSS 样式。 它是实现响应式设计(Responsive Des...
程序百科的头像-程序百科程序百科2个月前
2511

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

这是一个非常经典的 CSS 面试题,考察对 CSS 盒模型和 border 属性的深入理解。 核心原理 实现三角形的关键在于理解 CSS border 的渲染机制: 当一个元素的 width 和 height 都为 0 时,它的四...
程序百科的头像-程序百科程序百科2个月前
2414

面试题:CSS3 中有哪些新特性?

CSS3 是 CSS 技术的一次重大升级,它将 CSS 拆分为多个独立的模块,逐步推进,引入了大量新特性,极大地增强了网页的视觉表现力和布局能力。以下是 CSS3 中一些最重要的新特性,按类别进行归纳...
程序百科的头像-程序百科程序百科2个月前
259

面试题:说说你对 Flex 布局的理解及其使用场景

一、对 Flex 布局的理解 Flexbox(Flexible Box Layout),即 弹性盒子布局,是 CSS3 提供的一种一维布局模型,专门用于在容器和子元素之间高效地分配空间,即使子元素尺寸未知或动态变化,也能...
程序百科的头像-程序百科程序百科2个月前
4014

面试题:有哪些 CSS 选择器?请分别介绍

CSS 选择器是用于“选中”HTML元素并为其应用样式的模式。掌握各种选择器是精准控制页面样式的前提。以下是 CSS 中主要的选择器类型及其详细介绍。 一、基础选择器 1. 元素选择器(Type Selecto...
程序百科的头像-程序百科程序百科2个月前
3910