CSS 基础知识速览

一、单位与变量

1. 长度单位

px 固定像素；em/rem 与字体相关；vw/vh/vmin/vmax 与视口相关。

2. CSS 变量

通过 --token + var(--token) 做主题与样式复用。

3. 动态样式 API

setAttribute 改整段样式；style.setProperty 适合单属性精确更新。

二、布局核心

1. display

block/inline/inline-block/flex/grid/none 是布局入口。

2. flex

优先用于一维布局，关注主轴、交叉轴和换行行为。

3. position

relative/absolute/fixed/sticky 决定元素定位参照。

4. z-index

仅在已创建层叠上下文时有效。

三、文本与可见性

1. 文本排版

关注 text-align、line-height、white-space、text-overflow。

2. 隐藏策略

display:none 不占位；visibility:hidden 占位；opacity:0 可配合动画。

3. 光标与交互

cursor 用于交互反馈，避免“可点不可点”体验歧义。

四、动画与变换

1. transform

首选 translate/scale/rotate 做动效，减少回流。

2. transition / animation

过渡适合状态切换；关键帧适合复杂时间线动画。

五、高频场景

1. 居中

常用 flex + justify-content + align-items。

2. 多行省略

-webkit-line-clamp 搭配弹性盒模型实现。

3. 固定宽高比

使用 aspect-ratio（现代）或 padding 技巧（兼容）。

4. 高度塌陷

浮动场景下，优先用 ::after 清除浮动或开启 BFC。

30 秒口述模板

我会把「CSS」分成三层来讲：先讲核心概念和它解决的问题，再讲一个高频场景与实现思路，最后补充常见坑点和优化方向。这样既能回答基础问题，也能接住面试官追问。

2 分钟口述模板

如果展开讲，我会按“定义 -> 原理 -> 场景 -> 取舍”四步回答。先说明「CSS」解决的核心问题和边界；再讲 1 到 2 个关键机制，解释为什么这样设计；然后结合一个真实业务场景说明如何落地；最后补充常见坑点、性能或稳定性优化，以及与相近方案的取舍标准。

这样回答的好处是：既有原理深度，也有工程落地感，面试官继续追问到实现细节时也能自然展开。