一份不可多得的《CSS》面试指南 | 前端面试

固定不变选 px：需要精准尺寸的场景（边框、图标）；网页响应式选 rem/vwrem适合全局控制，vw适合按屏幕比例适配；小程序选 rpx：一键适配所有手机；局部缩放选 em：仅限简单嵌套场景（避免复杂层级）。核心逻辑：Tailwind 提供了上万种原子化类名（如w-10= 宽度 10px、bg-red-500= 红色背景、flex= 弹性布局），开发时直接给 HTML 加类名，不用新建 / 修改

千寻girling

329人浏览 · 2025-12-12 23:33:28

千寻girling · 2025-12-12 23:33:28 发布

1. 说一下 px / rem / em / rpx / vw / vh 区别是什么 ?

1、核心区别对比表

单位	类型	参考基准	核心使用场景	优缺点
px	绝对单位	屏幕 CSS 像素	固定尺寸（边框、图标、精准布局）	优点：精准；缺点：不适配不同屏幕
rem	相对单位	HTML 根元素 font-size	网页全局响应式布局	优点：易统一控制；缺点：需设置基准值
em	相对单位	父元素 / 自身 font-size	局部元素相对缩放（如按钮内文字）	优点：局部适配；缺点：嵌套易失控
rpx	相对单位	屏幕宽度（固定 750rpx）	微信 / 支付宝小程序适配	优点：小程序一键适配；缺点：仅适用于小程序
vw/vh	相对单位	视口宽度 / 高度的 1%	全屏布局、移动端页面适配	优点：纯屏幕比例适配；缺点：视口变化易变形

2. 像素（px）

定义：像素（Pixel）是 CSS 中最基础的绝对单位，1px 对应屏幕上的一个物理像素点.

3. 根元素字体大小（rem）

定义：rem（Root EM）是相对单位，1rem = HTML 根元素（<html>）的font-size值（默认情况下，浏览器<html>的font-size是 16px，所以 1rem=16px）。
特点：所有元素的 rem 值都基于根节点，修改根节点的font-size，所有用 rem 的元素会统一缩放，适合全局响应式。

4. 元素字体大小（em）

定义：em 是相对单位，1em = 当前元素的父元素font-size值（会嵌套继承，容易踩坑）。

5. 响应式像素（rpx）

定义：rpx（Responsive Pixel）是微信小程序 / 支付宝小程序的专属单位，设计初衷是 “一键适配所有手机屏幕”。

6. 视口单位（vw/vh）

定义：
- 1vw = 视口（浏览器可视区域）宽度的 1%；
- 1vh = 视口高度的 1%；
- 补充：vmin（vw 和 vh 的最小值）、vmax（vw 和 vh 的最大值）

7、实战选型建议

网页端：
- 基础布局（宽 / 高 / 边距）：优先用 rem + 媒体查询（适配不同屏幕）；
- 全屏元素（banner、弹窗）：用 vw/vh；
- 固定尺寸（边框、图标、按钮大小）：用 px；
- 局部文字适配：少量用 em。
小程序端：
- 所有尺寸优先用 rpx，无需手动计算，直接按设计稿写值；
- 固定小元素（如图标）可补充用 px。
PC 端：
- 优先用 px（精准控制），配合 vw/vh 做响应式大屏布局。

总结

固定不变选 px：需要精准尺寸的场景（边框、图标）；
网页响应式选 rem/vw：rem 适合全局控制，vw 适合按屏幕比例适配；
小程序选 rpx：一键适配所有手机；
局部缩放选 em：仅限简单嵌套场景（避免复杂层级）。

2. 了解过 TailwindCSS 吗 ?

这是前端选型时的关键考量 ——Tailwind 作为 “原子化 CSS 框架”，和传统的 Bootstrap、ElementUI 等组件化框架差异极大，我会用通俗易懂的语言拆解它的优缺点

一、TailwindCSS 的核心优点（为什么越来越多项目用它）

1. 极致的开发效率：“不用写自定义 CSS，直接拼类名”

核心逻辑：Tailwind 提供了上万种原子化类名（如 w-10= 宽度 10px、bg-red-500= 红色背景、flex= 弹性布局），开发时直接给 HTML 加类名，不用新建 / 修改 CSS 文件。
对比传统方式：
- 传统 CSS：写 <div class="btn"> → 再写 .btn { width: 100px; background: red; }；
- Tailwind：直接写 <div class="w-25 bg-red-500">，一步到位。
实际收益：减少 80% 以上的自定义 CSS 代码，不用来回切换 HTML/CSS 文件，新手也能快速写出规范样式。

2. 样式统一且可维护：“告别样式冲突，全局无冗余”

预设设计系统：Tailwind 的类名基于统一的设计规范（如间距 0.5rem/1rem/1.5rem、颜色 red-100 到 red-900），团队所有人用同一套类名，不会出现 “有人用 margin: 15px，有人用 margin: 16px” 的混乱。
无样式污染：原子化类名都是 “单一职责”（如 mt-4 只控制 “margin-top: 1rem”），不会像自定义 CSS 那样出现 “改一个类名影响全局” 的问题。
易复用：常用样式可通过 @apply 封装成自定义类（如 @apply w-25 bg-red-500 rounded;），既保留灵活性，又避免重复写类名。

3. 高度可定制：“能适配任何设计风格，不局限于框架预设”

自定义配置：通过 tailwind.config.js 可修改 / 扩展所有预设（如自定义颜色 primary: '#123456'、自定义间距 100: '25rem'），完全摆脱框架的 “设计枷锁”（对比 Bootstrap 改样式要覆盖大量默认类）。
按需编译：生产环境可通过 PurgeCSS 自动删除未使用的类名，最终生成的 CSS 文件通常只有几 KB（传统框架动辄几百 KB），加载速度更快。

4. 响应式布局超简单：“一套类名适配所有屏幕”

内置响应式前缀（sm:/md:/lg:/xl:），不用写媒体查询：

<!-- 小屏宽度100%，大屏宽度50% -->
<div class="w-full md:w-1/2"></div>

对比传统 CSS：需要写 @media (min-width: 768px) { .box { width: 50%; } }，代码量翻倍且易出错。

5. 学习成本低：“新手友好，不用记复杂 CSS 语法”

不用死记 calc()/flex-wrap/transition 等复杂 CSS 属性，只需记 Tailwind 的类名规则（如 mt-[数字]=margin-top、bg-[颜色]= 背景色），半天就能上手。
官方文档自带搜索功能，不懂的类名查一下就能用，比查 CSS 手册效率高。

二、TailwindCSS 的核心缺点（这些坑要提前避）

1. HTML 类名冗长：“标签变‘长串字符’，可读性下降”

<button class="w-25 h-10 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-md transition-colors duration-300">按钮</button>

2. 有一定的配置 / 部署成本：“初始化和编译需要配置，不是开箱即用”

新手容易卡壳的点：
1. 需配置 tailwind.config.js 才能自定义样式；
2. 需配置 PostCSS 才能编译 Tailwind；
3. 生产环境需配置按需编译，否则 CSS 文件会很大（未优化的 Tailwind 原始文件有几 MB）。

3. 团队协作需规范：“类名使用混乱会抵消优势”

若团队没有统一规范（如 “什么时候用 @apply 封装类名”“颜色只用预设的 primary/secondary”），可能出现：
- 有人用 bg-[#123456] 手写颜色，有人用 bg-primary；
- 有人堆砌几十行类名，不封装复用。
最终导致 HTML 可读性更差，维护成本反而上升。

三、优缺点总结表（快速对比）

维度	优点	缺点
开发效率	无需写自定义 CSS，响应式布局简单	HTML 类名冗长，可读性下降
样式维护	统一设计规范，无样式冲突，按需编译	配置 / 部署有成本，纯静态项目使用不便
灵活性	高度可定制，适配任何设计风格	依赖工具链，无 npm 环境体验差
学习成本	类名规则简单，新手易上手	易让新手忽略 CSS 基础原理
团队协作	样式规范统一，减少沟通成本	无规范时类名混乱，抵消优势

3. 如何清除浮动？

答案：浮动会导致父元素高度塌陷，清除方法：
1. 额外标签法：在浮动元素后加空标签 <div style="clear: both;"></div>（简单但冗余）。
2. 父元素触发 BFC：如 overflow: hidden（推荐，简洁）。
3. 伪元素法（最佳实践）：
  css
```
.parent::after {
  content: "";
  display: block;
  clear: both;
}
.parent { zoom: 1; } /* 兼容 IE6/7 */
```

4. 什么是 BFC？如何触发 BFC？BFC 有什么作用？

答案：
- BFC（块级格式化上下文）：独立的渲染区域，内部元素布局不受外部影响，反之亦然。
- 触发方式：
  - float: left/right（非 none）。
  - overflow: hidden/auto/scroll（非 visible）。
  - display: flex/grid/inline-block。
  - position: absolute/fixed。
- 作用：
  - 清除浮动（避免父元素高度塌陷）。
  - 阻止元素被浮动元素覆盖。
  - 解决 margin 重叠问题（如相邻元素垂直 margin 合并）。

5. CSS 中哪些属性可以继承？哪些不可以？

答案：
- 可继承属性（多与文本相关）：
  - 字体：font-size、font-family、font-weight。
  - 文本：color、text-align、line-height、letter-spacing。
  - 列表：list-style。
- 不可继承属性（多与布局相关）：
  - 盒模型：width、height、margin、padding、border。
  - 定位：position、top、left、float。
  - 背景：background、background-color。

6. 如何实现元素水平居中？

答案：
- 行内元素 / 文本：父元素设置 text-align: center。
- 块级元素（定宽）：margin: 0 auto。
- 块级元素（不定宽）：
  - 父元素用 flex：display: flex; justify-content: center。
  - 子元素用 transform：父元素 position: relative，子元素 position: absolute; left: 50%; transform: translateX(-50%)。

7. 如何实现元素垂直居中？

答案：
- 单行文本：line-height 等于父元素高度。
- 块级元素（已知高度）：
  - 父元素 position: relative，子元素 position: absolute; top: 50%; margin-top: -自身高度一半。
- 块级元素（未知高度）：
  - 父元素 display: flex; align-items: center（推荐）。
  - 父元素 position: relative，子元素 position: absolute; top: 50%; transform: translateY(-50%)。
  - 父元素设置 display: table-cell; vertical-align: middle。

8. 如何同时实现水平和垂直居中？

答案：

flex 布局（最简单）：

css

.parent {
  display: flex;
  justify-content: center; /* 水平 */
  align-items: center; /* 垂直 */
}

定位 + transform：

css

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

grid 布局：

css

.parent {
  display: grid;
  place-items: center; /* 同时设置水平和垂直 */
}

9. `display` 的常见值及作用？

答案：
- none：元素隐藏，不占空间（与 visibility: hidden 不同，后者占空间）。
- block：块级元素，独占一行，可设置宽高（如 div、p）。
- inline：行内元素，不独占一行，不可设置宽高（如 span、a）。
- inline-block：行内块元素，不独占一行，可设置宽高（如 input、img）。
- flex：启用弹性布局。
- grid：启用网格布局。
- table：元素作为表格显示。

10. `position` 的取值及区别？

答案：
- static：默认值，正常文档流，不受 top/left 影响。
- relative：相对定位，相对于自身原位置偏移，不脱离文档流，占原空间。
- absolute：绝对定位，相对于最近的非 static 父元素偏移，脱离文档流，不占原空间。
- fixed：固定定位，相对于浏览器窗口偏移，脱离文档流，不随滚动变化（如导航栏）。
- sticky：粘性定位，滚动时在指定阈值前为 relative，之后为 fixed（如吸顶效果）。

11. `float` 的特性及用途？为什么要清除浮动？

答案：
- 特性：元素脱离文档流，向左 / 右浮动，直到碰到父元素边缘或其他浮动元素。
- 用途：早期用于图文环绕、多列布局（现在多被 flex/grid 替代）。
- 需清除浮动的原因：浮动元素脱离文档流，导致父元素无法计算高度（高度塌陷），影响后续元素布局。

12. `flex` 布局的核心属性有哪些？

答案：
- 父容器属性：
  - flex-direction：主轴方向（row/column 等）。
  - justify-content：主轴对齐方式（flex-start/center/space-between 等）。
  - align-items：交叉轴对齐方式（flex-start/center/stretch 等）。
  - flex-wrap：是否换行（nowrap/wrap）。
  - align-content：多轴对齐（仅换行时生效）。
- 子元素属性：
  - flex-grow：剩余空间分配比例（默认 0，不分配）。
  - flex-shrink：空间不足时收缩比例（默认 1，可收缩）。
  - flex-basis：默认尺寸（默认 auto，即元素自身尺寸）。
  - flex：flex-grow、flex-shrink、flex-basis 的简写（如 flex: 1 即 1 1 0%）。
  - align-self：单独设置自身交叉轴对齐方式，覆盖 align-items。

13. `grid` 布局和 `flex` 布局的区别？

答案：
- flex：一维布局（要么行要么列），适合线性排列的元素（如导航栏、列表）。
- grid：二维布局（同时控制行和列），适合复杂网格结构（如仪表盘、不规则布局）。
- 核心差异：flex 依赖主轴和交叉轴，grid 依赖行和列的轨道（grid-template-rows/grid-template-columns）。

14. 什么是响应式布局？实现方式有哪些？

答案：
- 响应式布局：使页面在不同设备（手机、平板、PC）上自适应显示，保持良好体验。
- 实现方式：
  1. 媒体查询（@media）：根据屏幕宽度设置不同样式，如 @media (max-width: 768px) { ... }。
  2. 弹性布局（flex）：子元素自动调整尺寸。
  3. 网格布局（grid）：二维自适应。
  4. 流式布局：使用百分比设置宽高，而非固定像素。
  5. 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">（关键，避免移动端缩放）。

15. 媒体查询（`@media`）的语法及用途？

答案：
- 语法：@media [媒体类型] and (条件) { 样式 }
  - 媒体类型：screen（屏幕）、print（打印）等（可省略，默认 all）。
  - 条件：max-width（最大宽度）、min-width（最小宽度）、orientation: portrait（竖屏）等。
- 用途：实现响应式布局，如：
  css
```
/* 屏幕宽度 ≤ 768px 时应用 */
@media (max-width: 768px) {
  .container { width: 100%; }
}
/* 屏幕宽度 > 768px 且 ≤ 1200px 时应用 */
@media (min-width: 769px) and (max-width: 1200px) {
  .container { width: 90%; }
}
```

16. CSS 动画有哪些实现方式？`transition` 和 `animation` 的区别？

答案：

实现方式：transition（过渡）、animation（动画）、transform（变换，常配合动画）。

区别：

特性	`transition`	`animation`
触发方式	需要事件触发（如 `hover`）	可自动触发（设置 `animation-play-state`）
关键帧	仅支持开始和结束状态	支持多关键帧（`@keyframes`）
循环	不支持循环（一次过渡）	支持 `animation-iteration-count` 循环
复杂度	适合简单动画	适合复杂动画

17. `transform` 的常用属性及作用？

答案：transform 用于元素的变换（不影响布局），常用值：
- translate(x, y)：平移（translateX/translateY 单独设置）。
- scale(x, y)：缩放（scaleX/scaleY 单独设置，1 为原尺寸）。
- rotate(deg)：旋转（正值顺时针，负值逆时针）。
- skew(x-deg, y-deg)：倾斜。
- matrix()：矩阵变换（整合以上所有变换）。
- 示例：transform: translate(50px, 100px) rotate(30deg);

18. `z-index` 的作用及使用条件？

答案：
- 作用：控制元素在 z 轴（垂直屏幕）的堆叠顺序，值越大越靠上。
- 使用条件：元素必须设置 position 为 relative/absolute/fixed（static 无效）。
- 注意：父元素 z-index 会限制子元素，子元素无法超出父元素的堆叠层级（即使子元素 z-index 更大）。

19. 什么是 CSS Sprites（精灵图）？有什么优缺点？

答案：
- 精灵图：将多个小图标合并到一张图片，通过 background-position 显示指定部分。
- 优点：减少 HTTP 请求次数，提高页面加载速度。
- 缺点：维护成本高（修改图标需重新合并）；图标尺寸固定，缩放易失真。

20. 如何实现文字溢出省略？

答案：

单行文本：

css

.text {
  white-space: nowrap; /* 不换行 */
  overflow: hidden;    /* 隐藏溢出 */
  text-overflow: ellipsis; /* 显示省略号 */
}

多行文本（webkit 内核浏览器，如 Chrome/Safari）：

css

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示3行 */
  overflow: hidden;
}

21. `margin` 重叠问题是什么？如何解决？

答案：
- 现象：两个相邻的块级元素（垂直方向）的 margin 会合并为一个，取较大值（如上方元素 margin-bottom: 20px，下方 margin-top: 30px，最终间距为 30px）。
- 解决方法：
  - 给其中一个元素套父元素，并触发父元素 BFC（如 overflow: hidden）。
  - 将其中一个元素设为 inline-block。
  - 使用 padding 替代 margin（适用于父元素）。

22. `background` 的简写属性及顺序？

答案：background 是复合属性，顺序如下（可省略部分值）：background: [color] [image] [repeat] [attachment] [position];示例：background: #f00 url("img.jpg") no-repeat fixed center center;

23. `line-height` 的取值方式及作用？

答案：
- 作用：设置行高，影响文本垂直间距，常用于垂直居中单行文本。
- 取值：
  - 像素（line-height: 24px）：固定值。
  - 百分比（line-height: 150%）：基于父元素字体大小计算。
  - 无单位数字（line-height: 1.5）：基于自身字体大小计算（推荐，继承时更灵活）。

24. 如何隐藏元素？有哪些方法及区别？

答案：
1. display: none：元素完全消失，不占空间，不响应事件。
2. visibility: hidden：元素不可见，但占空间，不响应事件。
3. opacity: 0：元素透明，占空间，可响应事件（如点击）。
4. position: absolute; left: -9999px：元素移出可视区域，占空间（理论上），不影响布局。

25. CSS 选择器有哪些？优先级如何计算？

答案：
- 选择器类型：
  - 基础：id（#id）、class（.class）、标签（div）、通配符（*）、属性（[type="text"]）。
  - 复合：后代（div p）、子代（div > p）、相邻兄弟（div + p）、通用兄弟（div ~ p）。
  - 伪类：:hover、:active、:nth-child(n) 等；伪元素：::before、::after。
- 优先级计算（从高到低）：
  1. !important（最高，不推荐滥用）。
  2. 内联样式（style 属性，权重 1000）。
  3. id 选择器（权重 100）。
  4. 类 / 伪类 / 属性选择器（权重 10）。
  5. 标签 / 伪元素选择器（权重 1）。
  6. 通配符 / 继承样式（权重 0）。
- 规则：权重相加比较，相同则后写的覆盖先写的。

26. 什么是 CSS 盒模型？标准盒模型和 IE 盒模型的区别？

答案：
- 盒模型：CSS 中元素被视为一个盒子，包含 content（内容）、padding（内边距）、border（边框）、margin（外边距）。
- 区别：
  - 标准盒模型（box-sizing: content-box）：总宽度 = content 宽度 + padding + border（默认值）。
  - IE 盒模型（box-sizing: border-box）：总宽度 = 设置的 width（包含 content + padding + border）。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

大模型教我成为大模型算法工程师之day8：优化器与训练技巧

本文系统介绍了深度学习模型训练中的优化器演进与关键技术。从基础SGD到Momentum、Adam/AdamW优化器的原理对比，解析了学习率调度策略（Warmup和余弦退火）的重要性。深入讲解了归一化技术（BN/LN/RMSNorm）的作用机制及适用场景，并阐述了Dropout、Weight Decay等正则化方法的原理。文章通过形象类比和代码示例，帮助读者理解这些"炼丹"技巧如