前端 CSS 面试题共63篇

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

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

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

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

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

面试题:为什么需要清除浮动?清除浮动的方式有哪些?

这是一个经典的 CSS 布局问题,涉及到文档流、浮动特性以及高度塌陷等核心概念。以下是全面且结构清晰的回答。 一、为什么需要清除浮动? 浮动(float)最初设计用于实现文字环绕图片的效果,但...
程序百科的头像-程序百科程序百科2个月前
396

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

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

面试题:怎么实现元素的水平垂直居中?

元素的水平垂直居中是前端开发中最常见的布局需求之一。根据元素类型(块级、行内、未知尺寸、绝对定位等)和使用的技术,有多种实现方式。以下是 全面、清晰、结构化 的回答,适合在面试中展示...
程序百科的头像-程序百科程序百科2个月前
686

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

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

面试题:如何在浏览器可视区域画一个最大的正方形?

这是一个考察对 CSS 布局、视口单位和响应式设计理解的面试题。 目标是创建一个在任何屏幕尺寸下都尽可能大,且保持为正方形,并完全位于可视区域内的元素。 核心思路 要画一个“最大”的正方形...
程序百科的头像-程序百科程序百科2个月前
405

面试题:什么是 margin 重叠问题?如何解决?

Margin 重叠问题(Margin Collapse)是 CSS 布局中的一个重要特性,尤其在使用块级元素时经常遇到。理解它对于精确控制页面布局至关重要。 一、什么是 margin 重叠(Margin Collapse)? 在 标...
程序百科的头像-程序百科程序百科2个月前
265

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

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

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

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