面试题：如何在网页中画一条 0.5px 的线？
这是一个与“1px 问题”紧密相关的经典移动端 CSS 面试题，考察对高分辨率屏幕渲染和 CSS 技巧的理解。 核心答案 在现代浏览器中，可以直接使用 border 或 height 设置为 0.5px 来绘制一条 0.5p...
面试题：如何给网页设置小于 12px 的字体？
这是一个关于浏览器限制和现代 CSS 特性的面试题。传统上，浏览器（特别是早期的 WebKit 内核）会对字体大小设置下限（通常为 12px），但现代解决方案已经非常成熟。 核心答案 在现代浏览器中，...
面试题：什么是 1px 问题？如何解决 1px 问题？
这是一个经典的移动端 Web 开发面试题，涉及到物理像素、CSS 像素和设备像素比（DPR）的概念。 一、什么是 1px 问题？ 1px 问题是指在高分辨率的移动设备（如 Retina 屏幕）上，使用 CSS 设置 b...
面试题：CSS 中是否存在父选择器？其背后的原因是什么？
这是一个非常深入且经典的 CSS 面试题，触及了 CSS 选择器的核心设计原理。 核心答案 在标准的、广泛支持的 CSS 中，不存在真正的“父选择器”或“祖先选择器”。 你不能直接通过一个子元素的存...
面试题：有哪些默认 display: block 元素和 display: inline 元素？你还知道哪些 display 取值？
这是一个考察 HTML 元素默认行为和 CSS display 属性知识的面试题。回答时需要清晰分类，并展示对现代布局的理解。 一、默认 display: block 的元素 这类元素在页面中独占一行，会从新行开始，...
面试题：line-height: 100% 和 line-height: 1 有什么区别？
这是一个考察对 CSS line-height 属性计算方式深刻理解的经典面试题。虽然 100% 和 1 看似等价，但在 line-height 的上下文中，它们的行为有本质区别。 核心区别 值计算方式是否继承实际效果lin...
面试题：如果在伪元素中不写 content 会发生什么？
这是一个考察对 CSS 伪元素 (::before 和 ::after) 基础规则理解的面试题。 核心答案 如果在 ::before 或 ::after 伪元素中不写 content 属性，或者将 content 设置为 none，那么该伪元素将： ...
面试题：flex-shrink 和 flex-grow 的默认值是多少？作用是什么？
这是一个深入考察 CSS Flexbox 布局核心机制的面试题。理解 flex-grow 和 flex-shrink 的默认值及其作用，是掌握弹性布局的关键。 默认值 flex-grow 的默认值是 0。 flex-shrink 的默认值是 1。...
面试题：如何消除 inline-block 元素之间的间隙？
这是一个非常经典的 CSS 布局问题。inline-block 元素之间的间隙是由于 HTML 源码中的空白字符（空格、换行、制表符）在渲染时被当作一个空格符显示而导致的。 核心原因 当元素设置为 display: ...
面试题：CSS 如何快速选取同组兄弟元素的偶数序号元素？
这是一个考察对 CSS 选择器，特别是结构性伪类掌握程度的面试题。 最快速、最直接的方法是使用 :nth-child(even) 伪类选择器。 核心答案 /* 选取父元素下所有偶数位置的同组兄弟元素 */ .parent...
