position: sticky 是 CSS 中一种非常实用的定位方式，结合了 relative 和 fixed 定位的特点。 它允许元素在滚动到特定阈值之前表现得像相对定位（relative），一旦达到该阈值，则表现得像固定定...

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

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

这是一个考察对 CSS 伪元素 (::before 和 ::after) 基础规则理解的面试题。 核心答案 如果在 ::before 或 ::after 伪元素中不写 content 属性，或者将 content 设置为 none，那么该伪元素将： ...

在实际开发中，经常需要对超出容器宽度或高度的文本进行“溢出隐藏 + 省略号”处理，以保证 UI 的整洁性。CSS 提供了标准的属性组合来实现这一效果。 一、实现原理 核心思路是： 强制不换行（wh...

这是一个考察 CSS 定位机制核心知识的经典面试题。理解 absolute 和 fixed 的异同，是掌握页面布局的关键。 共同点 脱离文档流 (Removed from Normal Flow)： 两者都会使元素完全脱离正常的文档...

这是一个关于 CSS 性能优化和渲染机制 的核心问题。使用 transform: translate() 而不是传统的 position（如 top/left）来改变元素位置，主要是出于性能和渲染效率的考虑。 下面详细解释原因： ...

这是一个经典的 CSS 面试题，理解伪元素和伪类的区别对于掌握 CSS 选择器至关重要。 核心区别总结 伪类 (Pseudo-classes)：用于描述一个元素的特定状态或位置。它选择的是已存在的元素，但处于...

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

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