排序
面试题:如何消除 inline-block 元素之间的间隙?
这是一个非常经典的 CSS 布局问题。inline-block 元素之间的间隙是由于 HTML 源码中的空白字符(空格、换行、制表符)在渲染时被当作一个空格符显示而导致的。 核心原因 当元素设置为 display: ...
面试题:CSS 中 flex: 1 是什么意思?
在 CSS 中,flex 属性是用于 Flexbox 布局模型中的一个简写属性,它能够定义 flex 项目的扩展能力、收缩能力和基础大小。 flex: 1 这种写法实际上是一个简写形式,默认情况下它是 flex: 1 1 0 ...
面试题:说说你对 line-height 的理解及其赋值方式
line-height 是 CSS 中用于设置行高(即文本行之间的空间)的属性。它对文本的可读性和布局有着重要影响。下面从几个方面来详细解释 line-height 及其赋值方式。 理解 line-height 定义与作用:...
面试题:CSS 怎么实现单行、多行文本溢出隐藏?
在实际开发中,经常需要对超出容器宽度或高度的文本进行“溢出隐藏 + 省略号”处理,以保证 UI 的整洁性。CSS 提供了标准的属性组合来实现这一效果。 一、实现原理 核心思路是: 强制不换行(wh...
面试题:说说 CSS 中 position: absolute 与 fixed 的共同点和区别
这是一个考察 CSS 定位机制核心知识的经典面试题。理解 absolute 和 fixed 的异同,是掌握页面布局的关键。 共同点 脱离文档流 (Removed from Normal Flow): 两者都会使元素完全脱离正常的文档...
面试题:怎么实现网页两栏布局?
两栏布局是前端开发中最基础且常见的布局模式,通常分为两种形式: 一栏固定,一栏自适应 两栏等宽或按比例分配 以下是 多种实现方式,从传统到现代,全面覆盖,适合在面试中展示技术深度。 一...
面试题:为什么有时候用 translate 来改变位置而不是定位?
这是一个关于 CSS 性能优化和渲染机制 的核心问题。使用 transform: translate() 而不是传统的 position(如 top/left)来改变元素位置,主要是出于性能和渲染效率的考虑。 下面详细解释原因: ...
面试题:CSS 中 display、float、position 的关系是什么?
这是一个深入理解 CSS 布局机制的高级面试题。display、float 和 position 都能影响元素的盒模型生成和布局,它们之间存在复杂的优先级和相互覆盖关系。 核心原则 CSS 规范定义了当一个元素同时...
面试题:使用 link 和 @import 引用 CSS 的区别
在 HTML 中引入外部 CSS 样式表有两种主要方式:使用 <link> 标签和在 CSS 文件中使用 @import 规则。虽然它们都能加载样式,但在性能、兼容性、功能和使用场景上存在显著差异。 一、核心...
面试题:有哪些 CSS 选择器?请分别介绍
CSS 选择器是用于“选中”HTML元素并为其应用样式的模式。掌握各种选择器是精准控制页面样式的前提。以下是 CSS 中主要的选择器类型及其详细介绍。 一、基础选择器 1. 元素选择器(Type Selecto...
