前端 CSS 面试题共63篇

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

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

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

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

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

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

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

面试题:说说你对盒模型的理解

说说你对盒模型的理解 盒模型(Box Model) 是 CSS 布局的核心概念,它定义了每个 HTML 元素在页面上所占据的空间结构。理解盒模型是掌握网页布局的基础。 一、盒模型的组成 每一个元素都被视为...
程序百科的头像-程序百科程序百科2个月前
3311

面试题:CSS 中可继承与不可继承属性有哪些?

在 CSS 中,属性的继承(Inheritance) 是指子元素自动从父元素“继承”某些样式属性的机制。理解哪些属性可继承、哪些不可继承,对于高效编写 CSS 和避免样式混乱至关重要。 一、什么是继承? ...
程序百科的头像-程序百科程序百科2个月前
3312

面试题:如何用 CSS 实现一个宽高自适应的正方形?

要使用 CSS 实现一个宽高自适应的正方形,可以利用多种方法。这里介绍几种常见的实现方式: 方法一:使用 padding-top 或 padding-bottom 这种方法利用了 padding 百分比值是相对于包含块的宽度...
程序百科的头像-程序百科程序百科2个月前
3211

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

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

面试题:说说网页元素的层叠顺序

在网页开发中,层叠顺序(Stacking Order) 指的是当多个元素在页面上发生重叠时,浏览器如何决定哪个元素显示在上方,哪个元素显示在下方。这个顺序由 CSS 的 z-index 属性、元素的定位方式 以...
程序百科的头像-程序百科程序百科2个月前
309

面试题:如何根据设计稿进行移动端适配?

移动端适配的核心目标是:让网页在不同尺寸和分辨率的移动设备上,都能呈现出与设计稿一致的视觉效果和用户体验。 以下是根据设计稿进行移动端适配的完整流程和常用方案: 一、准备工作:了解设...
程序百科的头像-程序百科程序百科2个月前
2910

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

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