前前端主管：我在面试候选人时，靠这几道题，快速区分新手和老手！据前端面试官所说，我发现 80% 的候选人栽在了「基础题」

前言

大家好，我是李司凌，这份面试题精选自 GitHub 前端面试题库，我剔除了冷门、过时的题目，保留了高频考察、兼具理论深度和实战价值的 HTML/CSS 核心考点，每个题目都附带清晰解析和通俗回答，既适合面试备考，也适合夯实前端基础，方便大家收藏、反复学习。

第一部分：HTML 高频面试题（含解析 / 回答）

1. 什么是 Doctype？它的作用是什么？

解析

Doctype 是 HTML 文档的声明语句，不属于 HTML 标签本身，核心作用是告诉浏览器当前文档使用的 HTML/XHTML 规范版本，让浏览器能够按照对应的规范来解析和渲染页面，避免出现 “怪异模式”（Quirks Mode）。

通俗回答

Doctype 就是给浏览器的 “说明书”，告诉浏览器：“我这个页面是按照 HTML5（或其他版本）的规则写的，你按照这个规则来渲染我，别用老的、不标准的方式解析”。

对于 HTML5，声明非常简洁：<!DOCTYPE html>，没有版本号、没有多余属性，兼容所有现代浏览器。
如果不写 Doctype，浏览器会进入 “怪异模式”，不同浏览器对页面的解析规则不一致，会导致页面布局在不同浏览器上出现错乱，难以兼容。

2. 如何区分 Cookie、sessionStorage 和 localStorage？（高频中的高频）

解析

这三个都是浏览器的客户端存储技术，用于在浏览器端保存数据，但在存储生命周期、存储大小、共享范围、是否随请求发送等方面有本质区别，也是面试中考察对浏览器存储机制理解的核心考点。

通俗回答

三者的核心区别可以用一张表清晰概括，再补充关键细节：

特性	Cookie	sessionStorage	localStorage
存储大小	较小，约 4KB	中等，约 5MB-10MB	中等，约 5MB-10MB
生命周期	可设置过期时间（手动 / 浏览器关闭）	会话级，浏览器标签页关闭即销毁	持久化，除非手动删除（清理缓存 / 代码删除）
共享范围	同域名、同协议、同端口，可设置路径共享	仅当前标签页（即使同域名，其他标签页无法访问）	同域名、同协议、同端口，所有标签页共享
是否随 HTTP 请求发送	是，会自动附加在请求头中发送给服务器	否，仅在客户端浏览器中存储，不与服务器交互	否，仅在客户端浏览器中存储，不与服务器交互
核心使用场景	存储少量需要与服务器交互的数据（如登录状态标识、用户偏好设置）	存储单次会话的临时数据（如表单临时填写内容、页面跳转临时参数）	存储持久化的客户端数据（如用户浏览记录、本地缓存的静态数据）

补充关键细节：

Cookie 有过期时间（expires或max-age），若不设置，默认是 “会话 Cookie”，浏览器关闭即销毁；
sessionStorage 的 “会话” 是单个标签页的会话，即使刷新标签页数据保留，关闭标签页则数据消失，无法跨标签页共享；
localStorage 数据会永久保存在浏览器中，除非通过localStorage.removeItem()/localStorage.clear()手动删除，或用户清理浏览器缓存，否则一直存在。

3. 请描述`<script>`、`<script async>`和`<script defer>`的区别？

解析

三者都是用于加载 JavaScript 脚本的标签，核心区别在于脚本的下载时机、执行时机，以及是否会阻塞 HTML 解析，这直接影响页面的加载性能和脚本执行顺序，是考察前端性能优化基础的高频考点。

通俗回答

首先明确核心前提：默认的<script>标签会阻塞 HTML 解析，这是三者区别的出发点。

普通<script>标签
- 下载：当浏览器解析到该标签时，会暂停 HTML 解析，开始下载脚本文件；
- 执行：脚本下载完成后，立即执行脚本，执行完毕后，才继续解析后续的 HTML；
- 影响：如果脚本较大、下载较慢，会导致页面解析停滞，出现 “白屏”，影响用户体验，通常建议放在</body>标签前。
<script async>（异步加载）
- 下载：浏览器解析到该标签时，不会暂停 HTML 解析，而是在后台异步下载脚本文件；
- 执行：脚本下载完成后，立即暂停 HTML 解析，执行该脚本，执行完毕后继续解析 HTML；
- 关键特点：执行顺序不确定（哪个脚本先下载完成，哪个先执行），不保证脚本的执行顺序与标签在页面中的顺序一致；
- 适用场景：无需依赖其他脚本、独立执行的脚本（如统计埋点脚本、广告脚本）。
<script defer>（延迟加载）
- 下载：浏览器解析到该标签时，不会暂停 HTML 解析，在后台异步下载脚本文件；
- 执行：脚本下载完成后，不会立即执行，而是等待整个 HTML 文档解析完成（触发DOMContentLoaded事件前），再按照脚本标签在页面中的顺序依次执行；
- 关键特点：异步下载、延迟执行、保证执行顺序与标签顺序一致；
- 适用场景：依赖其他脚本、需要按顺序执行的脚本（如依赖 jQuery 的业务脚本）。

总结一句口诀：async“下载完就执行，不保证顺序”，defer“HTML 解析完再执行，保证顺序”，普通 script“下载 + 执行都阻塞 HTML”。

4. 为什么通常建议将 CSS`<link>`放在`<head>`中，将 JS`<script>`放在`</body>`前？有例外吗？

解析

这个问题考察前端页面加载性能和渲染机制，核心是理解 CSS 和 JS 对浏览器解析、渲染页面的影响，以及如何通过合理放置标签优化用户体验。

通俗回答

（1）CSS`<link>`放在`<head>`中的原因

浏览器渲染页面的流程是：解析 HTML 生成 DOM 树 → 解析 CSS 生成 CSSOM 树 → 结合 DOM 树和 CSSOM 树生成渲染树 → 布局 → 绘制。

如果 CSS<link>放在<head>中，浏览器可以在解析 HTML 的同时，异步下载并解析 CSS，生成 CSSOM 树，当 HTML 解析完成后，能快速生成渲染树，进行页面渲染，避免页面出现 “闪屏” 或 “无样式内容闪烁（FOUC）” ；
如果 CSS 放在页面底部，浏览器会先解析 HTML 生成 DOM 树，此时没有 CSS 样式，会先渲染出无样式的页面，之后再下载解析 CSS，重新渲染页面，用户会看到页面从 “无样式” 到 “有样式” 的闪烁，体验极差。

（2）JS`<script>`放在`</body>`前的原因

如前一题所述，普通<script>标签会阻塞 HTML 解析和页面渲染：

放在</body>前，浏览器已经解析完大部分 HTML，生成了完整的 DOM 树，此时执行 JS 脚本，不会阻塞页面核心内容的解析和渲染，用户能更快看到页面内容，减少 “白屏时间”；
同时，此时 DOM 已经基本加载完成，JS 脚本可以直接获取到页面中的 DOM 元素，无需额外等待DOMContentLoaded事件，简化代码逻辑。

（3）例外情况

CSS 的例外：
- 如果某些 CSS 是异步加载的（如通过media="print"设置仅打印时生效的 CSS，或通过 JS 动态加载的 CSS），可以不放在<head>中，不会影响页面渲染；
- 超大体积的 CSS 文件，为了不阻塞首屏渲染，可采用 “关键 CSS 内联”+“非关键 CSS 异步加载” 的方式，内联关键 CSS 放在<head>，非关键 CSS 通过<link rel="preload">异步加载。
JS 的例外：
- 依赖 JS 才能渲染的核心内容（如某些单页应用的根组件渲染），需要将脚本放在<head>中，并配合async/defer属性，避免阻塞 HTML 解析；
- 必须提前执行的脚本（如用户登录状态验证、全局配置注入），需要放在<head>中，可能需要同步执行，但需尽量精简脚本体积，减少阻塞影响。

5. 什么是 Canvas 和 SVG？两者的区别是什么？

解析

Canvas 和 SVG 都是 HTML5 中用于绘制图形的技术，但底层实现原理、适用场景完全不同，Canvas 是 “位图绘制”，SVG 是 “矢量图形描述”，是考察 HTML5 图形能力的核心考点。

通俗回答

两者都是前端绘制图形的工具，但定位和使用场景有明显区别：

（1）Canvas

本质：基于像素的位图绘制技术，相当于在页面上创建一个 “画布”，通过 JavaScript API 在画布上逐像素绘制图形；
特点：绘制的图形是位图，放大、缩小会出现锯齿和模糊；不支持事件绑定（无法直接给画布上的某个图形绑定点击事件）；性能较好，适合绘制大量、复杂、动态的图形（如动画、游戏、数据可视化大屏）；
核心场景：游戏开发、实时数据可视化（如股票 K 线图）、视频处理。

（2）SVG

本质：基于 XML 的矢量图形描述语言，通过标签（如<circle>、<rect>）描述图形的形状、颜色、大小，绘制的图形是矢量图；
特点：矢量图放大、缩小不会失真；支持事件绑定（可直接给<circle>标签绑定点击事件）；性能相对较差，不适合绘制大量、复杂的动态图形；图形结构可被 DOM 解析，便于修改和维护；
核心场景：图标制作、静态数据可视化（如饼图、柱状图）、LOGO 设计、简单的交互式图形。

总结：追求 “高清无失真、可交互、静态简单图形” 选 SVG；追求 “高性能、动态复杂、大量像素级绘制” 选 Canvas。

6. 什么是 data-* 属性？它的用途是什么？

解析

data-* 是 HTML5 新增的自定义数据属性，用于在 HTML 元素上存储自定义的、与元素相关的辅助数据，是前端开发中 “HTML 与 JS 之间传递轻量数据” 的常用方式，兼容性好、使用便捷。

通俗回答

data-* 属性是给 HTML 元素 “挂附加信息” 的专用属性，具体规则和用途如下：

命名规则：以data-开头，后面跟自定义的属性名（如data-id、data-user-name、data-product-info），属性名不区分大小写，建议使用小写，多单词用连字符分隔；
取值方式：在 JS 中可以通过元素.dataset.属性名获取（连字符分隔的属性名会自动转为驼峰命名，如data-user-name对应dataset.userName），也可以通过getAttribute('data-*')获取；
核心用途：
1. 存储元素相关的轻量辅助数据（如商品 ID、用户 ID、文章分类），避免通过 class、id 存储业务数据，让 HTML 结构更清晰；
2. 简化 JS 与 HTML 的交互，无需额外定义全局变量，直接从元素上获取所需数据（如点击商品卡片，通过data-id获取商品 ID，发起详情请求）；
3. 配合 CSS 做样式控制（如通过data-status属性控制元素的显示状态，[data-status="active"] { color: red; }）。

示例：

html

预览

<!-- HTML中定义data-*属性 -->
<div class="product" data-id="1001" data-product-name="手机">商品卡片</div>

<!-- JS中获取数据 -->
<script>
  const product = document.querySelector('.product');
  console.log(product.dataset.id); // 1001
  console.log(product.dataset.productName); // 手机
</script>

第二部分：CSS 高频面试题（含解析 / 回答）

1. 什么是 CSS 选择器的优先级（Specificity）？它是如何工作的？

解析

CSS 选择器优先级是浏览器决定哪个 CSS 规则最终应用到元素上的核心机制，当多个 CSS 规则匹配同一个元素时，优先级高的规则会覆盖优先级低的规则，是解决 CSS 样式冲突的关键，也是面试中考察 CSS 基础的必考点。

通俗回答

（1）什么是优先级

优先级是给 CSS 选择器分配的 “权重值”，权重值越高，对应的样式规则越优先被浏览器应用，简单说：“谁的权重高，元素就听谁的样式”。

（2）优先级的工作规则（权重排序从高到低）

可以将权重分为 4 个等级，用 “四位数字” 表示（a,b,c,d），等级越高，权重越大，具体对应：

a：内联样式（直接写在元素上的style属性），权重最高，a=1（如<div style="color: red">）；
b：ID 选择器（如#app），权重次之，b=1（多个 ID 选择器可累加，如#a#b，b=2）；
c：类选择器（.box）、伪类选择器（:hover、:nth-child()）、属性选择器（[type="text"]），权重第三，c=1（多个可累加，如.a.b，c=2）；
d：元素选择器（div、p）、伪元素选择器（::before、::after），权重最低，d=1（多个可累加，如div p，d=2）。

（3）核心判断规则

先比较最高等级的权重，等级高的胜出（如 a>b>c>d，内联样式永远比 ID 选择器优先级高）；
若最高等级权重相同，再比较下一个等级的权重，以此类推（如(0,1,0,0)> (0,0,2,0)）；
若四个等级权重完全相同，遵循 “后定义覆盖先定义”（同一样式表中，后面写的规则覆盖前面的）；
特殊值：!important会强制提升样式的优先级，超过所有上述规则（包括内联样式），但不建议频繁使用（会破坏 CSS 的层级结构，难以维护）。

（4）示例（权重从高到低排序）

css

/* 内联样式：(1,0,0,0) */
div style="color: red"

/* !important：强制最高 */
.box { color: blue !important; }

/* ID选择器：(0,1,0,0) */
#app { color: green; }

/* 类选择器+属性选择器：(0,0,2,0) */
.box[type="text"] { color: yellow; }

/* 类选择器：(0,0,1,0) */
.box { color: purple; }

/* 元素选择器+伪元素选择器：(0,0,0,2) */
div::before { color: orange; }

/* 元素选择器：(0,0,0,1) */
div { color: gray; }

2. 什么是 CSS 的 “重置（Reset）” 和 “归一化（Normalize）”？你会选择哪一个？为什么？

解析

两者都是用于解决不同浏览器对 HTML 元素的默认样式差异的方案，核心目标是实现浏览器样式兼容，但实现思路和优缺点截然不同，是考察 CSS 兼容方案理解的高频考点。

通俗回答

（1）CSS Reset（样式重置）

核心思路： “一刀切”，清除所有浏览器的默认样式，将所有 HTML 元素的默认边距、内边距、字体、列表样式等全部重置为统一值（通常为 0 或默认值）；
典型代表：Eric Meyer's Reset CSS、YUI Reset；
优点：样式重置彻底，避免浏览器默认样式的干扰，后续开发可以完全按照自己的需求编写样式，无 “隐藏样式” 隐患；
缺点：重置过于粗暴，会清除一些有用的默认样式（如<a>标签的下划线、<input>标签的默认样式），需要开发者手动重新定义这些样式，增加开发工作量；部分重置规则可能会影响元素的默认行为。

示例（简单的 Reset 样式）：

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}

（2）Normalize.css（样式归一化）

核心思路： “兼容并蓄”，保留浏览器有用的默认样式，仅统一不同浏览器之间的样式差异，让默认样式在不同浏览器上保持一致，而不是完全清除；
典型代表：Normalize.css（目前主流版本为 8.0.1）；
优点：
1. 保留有用的默认样式（如<a>标签的下划线、<em>标签的斜体），无需开发者手动重新定义，减少开发工作量；
2. 针对性修复浏览器的样式漏洞（如 IE 浏览器的表单元素样式错乱、移动端浏览器的字体大小不一致）；
3. 模块化结构，便于按需修改和扩展；
4. 兼容所有现代浏览器，包括移动端浏览器。
缺点：默认样式依然存在，若开发者需要完全自定义样式，仍需手动覆盖部分默认样式，灵活性略低于 Reset。

（3）选择建议及原因

在现代前端开发中，优先选择 Normalize.css，原因如下：

开发效率更高：保留有用的默认样式，无需重复编写基础样式，节省开发时间；
兼容性更好：针对性修复了大量浏览器样式漏洞，比手动编写的 Reset 样式更全面、更稳定；
维护成本更低：Normalize.css 是开源维护的，会持续更新以兼容新的浏览器版本，无需开发者自己维护兼容规则；
灵活性足够：若需要完全清除某个元素的默认样式，只需在自己的样式表中覆盖 Normalize 的默认样式即可，兼顾了兼容性和自定义需求。

补充：如果是开发对样式一致性要求极高的项目（如设计系统、组件库），可以在 Normalize.css 的基础上，补充少量自定义的 Reset 样式，兼顾两者的优点。

3. 请解释 CSS 盒模型（Box Model）？如何通过 CSS 修改盒模型的渲染方式？

解析

CSS 盒模型是浏览器渲染所有 HTML 元素的基础模型，每个元素都会被渲染成一个矩形盒子，盒模型定义了盒子的组成部分及尺寸计算方式，是理解 CSS 布局的核心基础，也是面试必考点。

通俗回答

（1）CSS 盒模型的组成

每个 HTML 元素的盒模型都由 4 个部分组成，从内到外依次是：

内容区（Content）：元素的核心内容区域，用于显示文本、图片等内容，尺寸由width和height属性定义；
内边距（Padding）：内容区与边框之间的空白区域，用于隔离内容和边框，不会被背景色覆盖（背景色会延伸到内边距区域），尺寸由padding系列属性定义；
边框（Border）：围绕内边距的线条，用于勾勒元素的轮廓，尺寸由border系列属性定义；
外边距（Margin）：边框与其他元素之间的空白区域，用于隔离不同元素，不会被背景色覆盖，尺寸由margin系列属性定义。

（2）两种盒模型的区别（核心考点）

浏览器默认支持两种盒模型，核心区别在于盒子的总宽度 / 总高度的计算方式不同：

标准盒模型（W3C 盒模型）
- 默认渲染方式（未设置box-sizing时，元素的默认值为content-box）；
- 尺寸计算方式：
  - 盒子总宽度 = width（内容区宽度） + padding-left + padding-right + border-left + border-right + margin-left + margin-right；
  - 盒子总高度 = height（内容区高度） + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom；
- 特点：width和height仅对应内容区的尺寸，添加padding和border会让盒子的总尺寸变大，容易导致布局错乱。
怪异盒模型（IE 盒模型 / 边框盒模型）
- 需要通过box-sizing: border-box手动设置；
- 尺寸计算方式：
  - 盒子总宽度 = width（内容区 + 内边距 + 边框的总宽度） + margin-left + margin-right；
  - 盒子总高度 = height（内容区 + 内边距 + 边框的总高度） + margin-top + margin-bottom；
- 特点：width和height包含了内容区、内边距和边框，添加padding和border不会改变盒子的总尺寸，只会挤压内容区的空间，布局更可控、更直观。

（3）如何修改盒模型的渲染方式

通过 CSS 的box-sizing属性可以修改元素的盒模型渲染方式，该属性有两个核心取值：

box-sizing: content-box;：设置为标准盒模型（默认值）；
box-sizing: border-box;：设置为怪异盒模型（边框盒模型）。

在现代前端开发中，通常会在全局设置* { box-sizing: border-box; }，让所有元素都使用边框盒模型，方便布局的计算和控制，避免因padding和border导致的布局错乱。

示例：

css

/* 全局设置边框盒模型，推荐做法 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 单个元素设置标准盒模型 */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
  /* 标准盒模型下，盒子总宽度=200+20*2+1*2=242px */
}

4. 请区分相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和静态定位（static）？

解析

这四种是 CSS 的核心定位方式，决定了元素在页面中的位置排列，以及元素之间的层级关系，是理解 CSS 布局（尤其是非流式布局）的核心，面试中考察频率极高。

通俗回答

首先明确：CSS 的position属性用于定义元素的定位方式，四个核心取值对应四种定位，其中静态定位是默认值，其余三种为 “定位元素”。

（1）静态定位（static）

默认值：所有元素的默认定位方式，无需手动设置；
特点：元素遵循 “正常文档流”（从上到下、从左到右）排列，无法通过top、right、bottom、left和z-index属性调整位置和层级；
适用场景：无需特殊定位的普通元素，是页面布局的基础。

（2）相对定位（relative）

核心特点： “相对于自身在正常文档流中的原始位置进行偏移” ，且偏移后，元素在文档流中的 “占位空间” 依然保留，不会影响其他元素的排列；
关键细节：
1. 可以通过top、right、bottom、left设置偏移量；
2. 支持z-index设置层级；
3. 元素本身仍处于正常文档流中，占位空间不变；
适用场景：微调元素位置（如图标与文字的对齐）、作为绝对定位元素的 “包含块”（父元素设为relative，子元素设为absolute，子元素会相对于父元素定位）。

（3）绝对定位（absolute）

核心特点： “相对于最近的已定位（非 static）祖先元素进行偏移” ，偏移后，元素会脱离正常文档流，不再保留占位空间，会影响其他元素的排列；
关键细节：
1. 可以通过top、right、bottom、left设置偏移量；
2. 支持z-index设置层级；
3. 若没有已定位的祖先元素，会相对于根元素（<html>）进行定位；
4. 元素脱离正常文档流，不占据文档流空间；
适用场景：实现元素的精准定位（如弹窗、下拉菜单、悬浮提示），通常需要配合父元素的relative定位使用。

（4）固定定位（fixed）

核心特点： “相对于浏览器视口（Viewport）进行偏移” ，偏移后，元素脱离正常文档流，不保留占位空间，且滚动页面时，元素的位置始终固定不变；
关键细节：
1. 可以通过top、right、bottom、left设置偏移量；
2. 支持z-index设置层级；
3. 元素位置不受页面滚动影响，始终固定在视口的某个位置；
4. 元素脱离正常文档流，不占据文档流空间；
适用场景：实现固定在页面中的元素（如导航栏、回到顶部按钮、悬浮广告）。

（5）核心区别总结表

定位方式	定位参考对象	是否脱离文档流	占位空间是否保留	滚动时位置是否变化
static（静态）	正常文档流	否	是	随页面滚动变化
relative（相对）	自身原始文档流位置	否	是	随页面滚动变化
absolute（绝对）	最近的非 static 祖先元素 / 根元素	是	否	随祖先元素（若有）滚动变化
fixed（固定）	浏览器视口	是	否	不变化，始终固定

5. CSS Grid 和 Flexbox 的区别是什么？何时选择其一？（高频）

解析

Grid 和 Flexbox 都是 CSS3 新增的现代布局方式，都能解决传统布局（浮动、定位）的痛点，但 Grid 是 “二维布局”，Flexbox 是 “一维布局”，适用场景有明显区别，是考察现代 CSS 布局能力的核心考点。

通俗回答

（1）核心区别：一维布局 vs 二维布局

这是两者最本质的区别，决定了它们的适用场景：

Flexbox（弹性盒模型）：一维布局，只能沿着 “行” 或 “列” 单个方向排列元素，即使有多行 / 多列，也是先完成一个方向的布局，再进行另一个方向的换行 / 换列，无法同时对行和列进行精准控制；
CSS Grid（网格布局）：二维布局，将页面划分为 “行” 和 “列” 组成的网格，元素可以放置在网格的任意单元格中，能够同时对行和列进行精准控制，实现复杂的二维布局。

（2）其他关键区别

特性	Flexbox	CSS Grid
布局维度	一维（行 / 列，二选一）	二维（行 + 列，同时控制）
布局核心	以 “元素” 为中心，关注元素的排列和对齐	以 “容器” 为中心，关注容器的网格划分
适用场景	简单的单行 / 单列布局，元素的对齐、分布	复杂的二维布局，页面整体布局、网格卡片、仪表盘
对齐方式	支持单行 / 单列内的元素对齐，多行对齐需额外配置	支持网格内单元格的精准对齐，行、列对齐独立可控
响应式布局	需配合媒体查询，手动调整换行和排列	支持`fr`单位、自动网格，可实现更简洁的响应式布局

（3）何时选择其一？

选择 Flexbox 的场景（一维布局需求）：
- 单行 / 单列元素的排列（如导航栏的菜单、按钮组、卡片内的内容对齐）；
- 元素的水平 / 垂直居中（最简单、最便捷的方式）；
- 动态内容的布局（如列表项，数量不固定，需要自动填充和对齐）；
- 移动端的简单布局（如头部导航、底部 tab 栏）。
示例：导航栏菜单水平排列、卡片内文字垂直居中、列表项均匀分布。
选择 CSS Grid 的场景（二维布局需求）：
- 页面的整体布局（如头部、侧边栏、主内容区、底部的二维划分）；
- 网格状布局（如商品卡片网格、相册、仪表盘的图表布局）；
- 需要同时控制行和列的尺寸、间距（如固定列宽 + 自适应行高、不等高网格对齐）；
- 复杂的响应式布局（如根据屏幕尺寸自动调整网格的行数和列数，无需大量媒体查询）。
示例：电商首页的商品网格、博客的文章列表网格、后台管理系统的页面布局。

（4）总结口诀

“一维布局用 Flex，二维布局用 Grid；简单对齐用 Flex，复杂网格用 Grid；元素排列用 Flex，容器划分用 Grid”。

补充：在实际开发中，两者也可以结合使用（如 Grid 划分页面整体布局，Flexbox 实现网格内元素的对齐和排列），兼顾两者的优点，实现更高效、更灵活的布局。

6. 请解释`* { box-sizing: border-box; }`的作用和优点？

解析

该代码是现代前端开发中的标配全局样式，基于 CSS 盒模型的怪异盒模型（边框盒模型），核心作用是简化布局计算，避免传统盒模型的布局痛点，是考察 CSS 布局基础和实战经验的高频考点。

通俗回答

（1）作用

box-sizing: border-box;将所有元素的盒模型设置为怪异盒模型（边框盒模型） ，此时元素的width和height属性不再仅对应 “内容区” 的尺寸，而是包含了 “内容区 + 内边距（padding）+ 边框（border）” 的总尺寸，外边距（margin）不包含在width/height内。

简单说：给元素设置width: 200px后，无论添加多少padding和border，元素的总宽度始终是 200px，padding和border只会挤压内容区的空间，不会让元素 “变大”。

（2）核心优点

布局计算更直观、更简单：传统标准盒模型中，元素的总尺寸需要手动计算（总宽度 = width+padding+border），尤其是在响应式布局中，计算繁琐且容易出错；使用border-box后，元素的尺寸就是我们设置的width/height，无需额外计算，布局更可控。
避免布局错乱：传统标准盒模型中，给元素添加padding或border会导致元素总尺寸变大，可能会挤压相邻元素，导致布局错位（如浮动布局中的换行、网格布局中的列宽超出）；使用border-box后，padding和border不会改变元素总尺寸，从根源上避免了这类布局错乱问题。
简化响应式布局和组件开发：在开发响应式布局或可复用组件时，元素的内边距和边框可能会根据需求调整，使用border-box后，无需修改width/height属性，只需调整padding和border即可，组件的尺寸稳定性更高，更易维护和复用。
全局统一布局规则：给*（所有元素）设置该属性，让页面中所有元素都遵循相同的盒模型规则，避免部分元素使用默认盒模型、部分元素使用边框盒模型导致的布局不一致，提升代码的一致性和可维护性。

补充：该属性兼容所有现代浏览器，包括 IE8 及以上版本，无兼容性隐患，是现代前端开发的必备全局样式之一。

结尾

以上就是我精选的 HTML/CSS 高频核心面试题，涵盖了基础理论、实战应用、性能优化等多个维度，既适合面试备考，也适合日常夯实基础。我后面还会持续更新 JavaScript、前端工程化等核心面试题，欢迎公众号读者持续关注、收藏转发，一起提升前端硬实力！

当年被CSS 优先级或盒模型难住的同学，评论区扣个 1！我打算单独用一篇文章来聊聊这个话题。

如果你觉得内容有用，欢迎点赞 + 关注 + 转发给身边的前端同学，让更多人避开这些坑～

更多前端面试干货、学习资料，以及进群交流的机会，记得关注前端小皇帝后台哦，我们一起成长，拿到高薪工作机会！

前前端主管：我在面试候选人时，靠这几道题，快速区分新手和老手！

前言

第一部分：HTML 高频面试题（含解析 / 回答）

1. 什么是 Doctype？它的作用是什么？

解析

通俗回答

2. 如何区分 Cookie、sessionStorage 和 localStorage？（高频中的高频）

解析

通俗回答

3. 请描述<script>、<script async>和<script defer>的区别？

解析

通俗回答

4. 为什么通常建议将 CSS<link>放在<head>中，将 JS<script>放在</body>前？有例外吗？

解析

通俗回答

（1）CSS<link>放在<head>中的原因

（2）JS<script>放在</body>前的原因

（3）例外情况

5. 什么是 Canvas 和 SVG？两者的区别是什么？

解析

通俗回答

（1）Canvas

（2）SVG

6. 什么是 data-* 属性？它的用途是什么？

解析

通俗回答

第二部分：CSS 高频面试题（含解析 / 回答）

1. 什么是 CSS 选择器的优先级（Specificity）？它是如何工作的？

解析

通俗回答

（1）什么是优先级

（2）优先级的工作规则（权重排序从高到低）

（3）核心判断规则

（4）示例（权重从高到低排序）

2. 什么是 CSS 的 “重置（Reset）” 和 “归一化（Normalize）”？你会选择哪一个？为什么？

解析

通俗回答

（1）CSS Reset（样式重置）

（2）Normalize.css（样式归一化）

（3）选择建议及原因

3. 请解释 CSS 盒模型（Box Model）？如何通过 CSS 修改盒模型的渲染方式？

解析

通俗回答

（1）CSS 盒模型的组成

（2）两种盒模型的区别（核心考点）

（3）如何修改盒模型的渲染方式

4. 请区分相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和静态定位（static）？

解析

通俗回答

（1）静态定位（static）

（2）相对定位（relative）

（3）绝对定位（absolute）

（4）固定定位（fixed）

（5）核心区别总结表

5. CSS Grid 和 Flexbox 的区别是什么？何时选择其一？（高频）

解析

通俗回答

（1）核心区别：一维布局 vs 二维布局

（2）其他关键区别

（3）何时选择其一？

（4）总结口诀

6. 请解释* { box-sizing: border-box; }的作用和优点？

解析

通俗回答

（1）作用

（2）核心优点

结尾

3. 请描述`<script>`、`<script async>`和`<script defer>`的区别？

4. 为什么通常建议将 CSS`<link>`放在`<head>`中，将 JS`<script>`放在`</body>`前？有例外吗？

（1）CSS`<link>`放在`<head>`中的原因

（2）JS`<script>`放在`</body>`前的原因

6. 请解释`* { box-sizing: border-box; }`的作用和优点？