《2024 前端面试全攻略：HTML、CSS、JavaScript、React 与 Vue 详解及常见问题解答》

一、HTML 和 CSS 部分

1. 解释盒模型以及标准盒模型和怪异盒模型的区别。

   • 答案：盒模型是 CSS 中用来设计和布局的一种模型，它描述了元素在页面中所占的空间。盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
   • 标准盒模型中，元素的 width 和 height 只包含内容的宽度和高度，不包括内边距和边框。计算元素的总宽度为 width + padding + border + margin。
   • 怪异盒模型中，元素的 width 和 height 包含了内容、内边距和边框。计算元素的总宽度为 width + margin。怪异盒模型主要在 IE 早期版本中使用，现代浏览器默认使用标准盒模型，但可以通过设置box-sizing属性来切换。

2. 如何实现水平居中与垂直居中？

   • 水平居中：
     • 对于行内元素，可以使用text-align: center在父元素上实现水平居中。
     • 对于块级元素，如果已知宽度，可以设置margin: 0 auto来实现水平居中。
   • 垂直居中：
     • 对于单行文本，可以设置父元素的line-height等于其height实现垂直居中。
     • 对于已知高度的块级元素，可以通过绝对定位和负边距来实现。设置子元素为绝对定位，top: 50%，left: 50%，然后使用负边距将子元素的尺寸的一半移回来，即margin-top: -元素高度一半，margin-left: -元素宽度一半。
     • 使用 flex 布局，在父元素上设置display: flex，align-items: center（垂直居中），justify-content: center（水平居中）。

3. 介绍一下 CSS 选择器的种类及优先级。

   • 种类：
     • 元素选择器（如div）。
     • 类选择器（如.classname）。
     • ID 选择器（如#idname）。
     • 伪类选择器（如:hover、:active等）。
     • 伪元素选择器（如::before、::after）。
     • 属性选择器（如[attr="value"]）。
   • 优先级：
     • 内联样式（最高）。
     • ID 选择器。
     • 类选择器、属性选择器、伪类选择器。
     • 元素选择器、伪元素选择器（最低）。
     • 当多个选择器作用于同一个元素时，优先级高的会覆盖优先级低的样式。如果优先级相同，则后出现的样式会覆盖先出现的样式。

4. 简述 CSS 预处理器（如 Sass、Less）的优点。

   • 可以使用变量，避免重复书写相同的值，提高代码的可维护性。
   • 支持嵌套规则，使 CSS 结构更加清晰。
   • 可以进行函数和混合（mixin）的定义，