🌐

HTML/CSS 面试题

12 道题 · 2 个模块

简单 5中等 6困难 1

HTML

5 题

Q1.HTML5 新增了哪些语义化标签？

简单

参考答案

`<header>` 页头、`<nav>` 导航、`<main>` 主体、`<article>` 文章、`<section>` 分区、`<aside>` 侧边栏、`<footer>` 页脚、`<figure>`/`<figcaption>` 插图、`<time>` 时间、`<mark>` 高亮。

好处：SEO 友好、屏幕阅读器可访问、代码更清晰（告别 `<div class="header">`）。

Q2.localStorage、sessionStorage、Cookie 的区别？

简单

参考答案

| | localStorage | sessionStorage | Cookie |
|---|-------------|---------------|--------|
| 容量 | ~5MB | ~5MB | ~4KB |
| 过期 | 永久 | 关闭标签页 | 可设置 |
| 发送到服务器 | ❌ | ❌ | ✅（自动附带） |
| 作用域 | 同源 | 同源+同标签 | 同源+path |

Q3.src 和 href 的区别？

简单

参考答案

`href`（Hypertext Reference）建立当前文档与资源的**链接**——不阻断页面解析（如 `<link>` 加载 CSS）。

`src`（Source）将资源**嵌入**当前文档——会暂停解析直到资源加载完毕（如 `<script src>` 会阻塞，除非加 async/defer）。

html
<link href="style.css" rel="stylesheet">  <!-- href：引用 -->
<script src="app.js"></script>            <!-- src：嵌入 -->
<img src="photo.jpg">                     <!-- src：嵌入 -->

Q4.script 标签中 defer 和 async 的区别？

简单

参考答案

html
<script src="a.js"></script>        <!-- 阻塞：下载+执行期间暂停解析 -->
<script src="a.js" async></script>   <!-- 异步下载，下载完立即执行（乱序） -->
<script src="a.js" defer></script>   <!-- 异步下载，DOM 解析完后按顺序执行 -->

| | 下载 | 执行时机 | 执行顺序 |
|---|------|---------|--------|
| 普通 | 阻塞 | 立即 | 文档顺序 |
| async | 并行 | 下载完立即 | 不保证 |
| defer | 并行 | DOMContentLoaded 前 | 文档顺序 |

**默认用 defer**——不阻塞渲染，保持执行顺序。

Q5.HTML 的 data-* 属性有什么用途？

中等

参考答案

`data-*` 用于在 HTML 元素上存储**自定义数据**——不显示，但 JS 可以读写。

html
<button data-user-id="123" data-action="delete">删除</button>

javascript
const btn = document.querySelector('button');
console.log(btn.dataset.userId);   // '123'
console.log(btn.dataset.action);   // 'delete'
btn.dataset.confirmed = 'true';    // 设置新属性 data-confirmed="true"

适合在 HTML 和 JS 之间传递数据——避免使用非标准属性。

CSS

7 题

Q1.CSS 盒模型是什么？box-sizing 的作用？

简单

参考答案

盒模型 = content + padding + border + margin 四层。默认 `box-sizing: content-box`——width 只包含内容区。`box-sizing: border-box`——width 包含 content+padding+border（更直观）。

css
/* 几乎所有项目的标配 */
*, *::before, *::after { box-sizing: border-box; }

Q2.CSS 优先级（特指度）怎么计算？

中等

参考答案

优先级 = (内联, ID, class/伪类, 元素/伪元素)

p { color: black; }                /* (0,0,0,1) */
.intro { color: blue; }            /* (0,0,1,0) 胜 */
#main p { color: red; }            /* (0,1,0,1) 胜 */
<p style="color: green;">          /* (1,0,0,0) 最终胜 */

/* !important 打破一切（慎用） */
.text { color: red !important; }

Q3.Flexbox 和 Grid 的区别？什么时候用哪个？

中等

参考答案

**Flexbox**：一维布局（行或列）——适合组件内部排列、导航栏、居中。**Grid**：二维布局（行和列）——适合页面级布局、复杂网格。

两者不冲突——可以互相嵌套：页面用 Grid，卡片内部用 Flexbox。

Q4.CSS 中 BFC（块级格式化上下文）是什么？如何创建？

中等

参考答案

BFC 是独立的渲染区域——内部布局不影响外部。

**创建 BFC**：
- `overflow: hidden/auto/scroll`（非 visible）
- `display: flow-root`（最干净的方案）
- `position: absolute/fixed`
- `float` 非 none

**用途**：清除浮动、防止 margin 合并、自适应两栏布局。

css
.container { display: flow-root; }

Q5.CSS 动画性能优化有哪些要点？

中等

参考答案

1. **只用 transform 和 opacity 做动画**——GPU 加速，不触发重排（reflow）
2. 避免动画 `width`/`height`/`margin`/`padding`——触发 layout
3. 用 `will-change` 提前告知浏览器：`will-change: transform;`
4. 用 `requestAnimationFrame`（JS 动画）
5. 避免复杂选择器和大量同时动画

css
/* ✅ 好 */
.box { transition: transform 0.3s, opacity 0.3s; }
.box:hover { transform: scale(1.1); opacity: 0.8; }

/* ❌ 差 */
.box { transition: width 0.3s; }
.box:hover { width: 200px; }

Q6.CSS 实现水平垂直居中的 5 种方法？

困难

参考答案

css
/* 1. Flexbox（最推荐） */
.parent { display: flex; justify-content: center; align-items: center; }

/* 2. Grid（最简洁） */
.parent { display: grid; place-items: center; }

/* 3. 绝对定位 + transform（传统） */
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* 4. 绝对定位 + margin auto */
.child { position: absolute; inset: 0; margin: auto; width/height 需指定; }

/* 5. table-cell（古老） */
.parent { display: table-cell; vertical-align: middle; text-align: center; }

Q7.rem、em、px、vw 的区别？移动端适配用什么？

中等

参考答案

- **px**：固定像素——不缩放
- **em**：相对父元素 font-size——容易嵌套叠加
- **rem**：相对根元素 `<html>` font-size——推荐
- **vw/vh**：视口百分比——适合全屏布局

**移动端适配方案**：
1. **rem + 动态设置根字号**：`document.documentElement.style.fontSize = clientWidth/10 + 'px'`
2. **vw**：`font-size: calc(16px + 0.5vw)` 或用 clamp()
3. **Tailwind** 等框架的响应式断点

css
html { font-size: 16px; }  /* 1rem = 16px */
@media (max-width: 375px) { html { font-size: 14px; } }