CSS 和 HTML 面试题及答案 [2022]

GenAI LIVE! | 2025年6月4日

我上一篇关于JavaScript 面试问题和答案（初级和高级）的文章📮得到了 dev.to 社区的良好反馈，所以我决定完成整个包。

我参加过很多次面试，也面试过很多工程师💯。以下是我整理出来的最常见的 HTML 和 CSS 问题及答案，这些问题和答案经常出现，可能会在你的下一次前端面试中被问到。

即使你暂时不需要，也可以随时收藏🔖。以后你寻找新职位的时候，可能需要刷新/回顾一下。

CSS面试题

什么是 CSS Box 模型？

盒子模型是一个包裹每个 HTML 元素的盒子。
盒子包含内容、填充、边框和边距。

框的内容是文本和图像出现的地方
内边距是内容周围的区域。内边距是透明的
边框是围绕填充和内容的边框
边距是边框以外的区域。边距是透明的

什么是 CSS 精灵？

CSS 精灵图将多张图片合并成一张更大的图片。这样只需要一次服务器请求，从而缩短加载时间。如果没有 CSS 精灵图，每张图片都需要单独发送服务器请求。

什么是 CSS 预处理器？

CSS 预处理器是一个程序，它允许你使用预处理器自身独特的语法生成 CSS。市面上有很多 CSS 预处理器可供选择，每个预处理器都会添加一些纯 CSS 中不存在的功能，例如变量、混合宏、嵌套选择器等等。这些功能使 CSS 结构更易于阅读和维护。

解释 CSS 中特异性的概念。

特异性是指浏览器决定哪些 CSS 属性值与要应用的元素最相关。特异性会为给定的 CSS 声明赋予权重，该权重由匹配选择器中每种选择器类型的数量决定。当多个声明具有相同的特异性时，CSS 中找到的最后一个声明将应用于该元素。

什么是！重要？

重要属性用于提供比普通属性更高的权重（重要性）。
它用于覆盖在其他地方声明的其他样式，以实现特定的设计。
我们可以将重要属性视为主要优先级，因此需要应用它并忽略其他规则。

解释visibility: hidden和display: none之间的区别？

visibility: hidden 会隐藏元素，但会占用空间，影响文档的布局。display
: none 也会隐藏元素，但不占用空间，不会影响文档的布局。

在 CSS 中定位某个元素有哪些不同的方法？

位置可以是静态、相对、绝对、固定和粘性

静态是默认的定位值。元素将像平常一样流入页面。静态定位不支持 top、right、bottom、left 和 z-index 属性。
相对元素相对于自身进行调整，但不改变布局
绝对元素从页面流中移除，并定位在相对于其最近定位祖先（如果有）的指定位置，或者相对于初始包含块。
固定元素也会从页面流中移除。它相对于视口定位，滚动时不会移动。
粘性元素是相对定位和固定定位的混合体。元素在超过指定阈值之前，将被视为相对定位；超过阈值后，将被视为固定定位。

box-sizing: border-box 起什么作用？

这会告诉浏览器将元素的宽度和高度与边框和内边距结合起来。这使得处理元素尺寸变得更加容易。它还能消除您在布局内容时可能遇到的许多陷阱。

inline、inline-block、block 之间有什么区别？

块元素总是从新行开始。它们也会占用整行的空间。

内联元素不从新行开始，这些元素与旁边的内容和标签出现在同一行。

内联块元素与内联元素类似，不同之处在于它们可以在四边添加填充和边距。

什么是伪元素？

伪元素允许你以特殊的方式操作元素的各个部分。一个选择器中只能使用一个伪元素，但它必须出现在语句中的简单选择器之后。

   p::first-letter {
     color: #ff0000;
   }

什么是伪类？

伪类是一种选择器，用于选择处于特定状态的元素。与常规类一样，你可以在一个选择器中链接任意数量的伪类。

   a:hover {   
     color: red;      
   }

Flexbox 和 Grid 有什么区别？

flexbox 是一种一维布局，可以创建行或列布局，而 grid 是一种二维布局，可以处理行和列布局。

这两种方法都可以轻松地设计和构建网页布局，而无需编写大量 CSS。

一般规则是，如果您需要将布局定义为行或列，则使用 flexbox。

使用网格如果您想定义一个网格并将内容放入其中。

您也可以将这两者混合在一起。

不喜欢阅读，更喜欢看视频？没问题，我们帮你搞定 -

HTML面试题

什么是 HTML 实体？

HTML 实体是一段以与号 ( & ) 开头、以分号 ( ; ) 结尾的文本（“字符串”）。它们通常用于显示保留字符（否则会被解释为 HTML 代码）和不可见字符（例如不间断空格）。

HTML 中的语义元素是什么？

语义元素是 HTML 元素，它向浏览器和开发者展示其内容的含义。诸如、和之类的元素

是语义元素。

什么是元标记？

元标签是可以包含在网页中的 HTML 标签，用于描述网页内容。这些标签不会显示在页面上，但会被 google.com 等搜索引擎和网络爬虫读取。

HTML5 中的两种 Web 存储类型是什么？

会话存储 (Session Storage) 存储当前会话的数据。浏览器关闭时，会话存储中的数据会自动清除。
本地存储 (Local Storage) 中的数据不会在当前浏览器窗口关闭时自动删除。

什么是 Web Worker？

Web Worker 是在单独线程上运行的 JavaScript 代码。它用于计算耗时长且繁重的任务，并且不会影响页面的性能。

什么是 HTML？

HTML，即超文本标记语言，是创建网页的标准标记语言。它用于构建网页及其内容。

什么是 HTML 属性？

HTML 属性是 HTML 标签的附加信息，用于改变 HTML 元素的行为或显示方式。属性直接位于标签名称之后，在两个尖括号内。

数据属性有什么用处？

当不存在合适的 HTML5 元素或属性时，数据属性可让您将自定义数据分配给元素以存储更多信息或数据。

“id”和“class”属性之间有什么区别？

ID 仅用于标识单个元素。Class 可用于标识多个 HTML 元素。

图像上的 alt 属性的用途是什么？

alt 属性可在用户无法查看图片时提供替代信息。此属性也可用于辅助功能。

内联元素和块级元素之间有什么区别？

内联元素仅占用内容所必需空间，且不另起一行。块元素则另起一行，并占用整个页面的可用宽度。

我们如何在 HTML 中创建超链接？

锚标签或标签用于创建超链接。这会在两个不同的 HTML 网页之间创建路径。

说出 HTML 中的三种列表类型

有序列表以编号格式显示元素，其中项目的顺序很重要
无序列表以项目符号格式显示元素，其中项目的顺序无关紧要
定义列表以类似字典的定义形式显示元素。它包含键值对。