2023.06.04 - 2023.06.06 更新前端面试问题总结（9道题）
获取更多面试相关问题可以访问
github 地址: https://github.com/pro-collection/interview-question/issues
gitee 地址: https://gitee.com/yanleweb/interview-question/issues

目录：

• 初级开发者相关问题【共计 2 道题】
• 414.什么是正向代理，反向代理【热度: 656】【CSS】
• 415.css 隐藏元素的方法有哪些【热度: 1,076】【CSS】
• 中级开发者相关问题【共计 7 道题】
• 416.css 中 伪元素和伪类的区别和作用【热度: 429】【CSS】
• 417.CSS3 中有哪些新特性【热度: 1,102】【CSS】
• 418.postcss 是什么，作用是啥？【热度: 1,155】【CSS】
• 419.css 栅格布局是什么，如何实现【热度: 368】【CSS】
• 420.详细介绍一下 CSS Grid 布局【热度: 370】【CSS】
• 421.html 元素节点上， 有多个 class 名称，这几个class 名称对应的样式渲染优先级是如何的？【热度: 769】【CSS】
• 422.如何避免全局样式污染？【热度: 744】【CSS】

初级开发者相关问题【共计 2 道题】

414.什么是正向代理，反向代理【热度: 656】【CSS】

关键词：css display 属性、css display 作用

下面是一些常用的 CSS display 属性值及其作用，用表格形式表示：

这个表格展示了一些常见的 display 属性值以及它们的作用。通过设置不同的 display 值，可以控制元素的布局行为和显示效果，从而实现不同的页面布局和样式效果。

415.css 隐藏元素的方法有哪些【热度: 1,076】【CSS】

关键词：隐藏元素

有多种方法可以隐藏元素的CSS。

1. display: none;：将元素完全隐藏，不占据任何空间。
2. visibility: hidden;：将元素隐藏，但仍占据空间。
3. opacity: 0;：将元素透明化，但仍占据空间。
4. position: absolute; left: -9999px;：将元素定位到屏幕外部，不显示在可见区域。
5. height: 0; width: 0; overflow: hidden;：将元素高度和宽度设为0，同时隐藏溢出内容。
6. clip-path: polygon(0 0, 0 0, 0 0);：使用剪切路径将元素隐藏。

这些方法可以根据具体的需求选择合适的方式来隐藏元素。使用 display: none; 是最常见和常用的隐藏元素的方法，它会完全移除元素并且不占据页面空间。而其他方法则可以根据需要在元素隐藏的同时保留占位空间或其他特殊效果。

display: none;、visibility: hidden; 和 opacity: 0; 区别是啥

display: none;、visibility: hidden; 和 opacity: 0; 是用于隐藏元素的CSS属性，它们之间有一些区别：

1. display: none;：该属性会完全移除元素，并且不占据页面空间。隐藏后的元素在文档流中不可见，也不会影响其他元素的布局。相当于元素被完全移除了，无法通过任何方式找到它。当需要彻底从页面中移除元素时，可以使用该属性。
2. visibility: hidden; ：该属性会将元素隐藏，但仍然占据页面空间。隐藏后的元素在文档流中保留了位置，仅仅是不可见了。元素隐藏后不会影响其他元素的布局。可以通过JavaScript或其他方式找到该元素，并且可以在需要时将其重新显示。
3. opacity: 0;：该属性将元素设置为完全透明。元素仍然占据页面空间，但是不可见。透明元素在文档流中保留位置，并且不会影响其他元素的布局。可以通过JavaScript或其他方式找到该元素，并在需要时将其重新设置为可见。

综上所述，display: none; 完全移除元素并且不占据空间，visibility: hidden; 保留元素位置但不可见，opacity: 0; 使元素透明但仍然占据空间。根据具体需求选择合适的属性来隐藏元素。

中级开发者相关问题【共计 7 道题】

416.css 中 伪元素和伪类的区别和作用【热度: 429】【CSS】

关键词：伪元素和伪类

伪元素和伪类是 CSS 中用于选择和样式化元素的特殊标记，它们有一些区别和不同的作用。

伪元素（Pseudo-Element）：

• 表示文档中不存在的元素，用于在元素的特定位置插入样式化内容。
• 通过双冒号 :: 来表示，例如 ::before、::after。
• 可以使用伪元素为元素添加额外的内容、样式或装饰，如插入文本、图标、边框等。
• 通过 content 属性设置伪元素的内容。
• 伪元素在文档中并不存在，因此无法通过 JavaScript 直接操作它们。

伪类（Pseudo-Class）：

• 表示元素在特定状态下的样式，例如鼠标悬停、被点击、处于某个状态等。
• 通过单冒号 : 来表示，例如 :hover、:active。
• 用于选择符合特定条件的元素，如选择第一个子元素、选择奇偶行等。
• 伪类通过 CSS 规则选择元素的特定状态或条件来应用样式，与元素本身相关。
• 伪类可以通过 JavaScript 动态地添加或移除，以改变元素的状态。

总结：

• 伪元素用于创建不存在于文档结构中的元素，并为其添加样式化内容。
• 伪类用于选择元素的特定状态或条件，并为其应用样式。
• 伪元素使用双冒号 :: 表示，伪类使用单冒号 : 表示。
• 伪元素在文档中并不存在，而伪类选择的是实际存在的元素。

使用伪元素和伪类可以在 CSS 中实现更多的样式化效果和交互行为，使页面更加丰富和动态。

417.CSS3 中有哪些新特性【热度: 1,102】【CSS】

CSS3引入了许多新特性和模块，以下是一些常见的CSS3新特性：

1. 选择器增强：
2. 属性选择器：支持更多的属性选择器，如属性值前缀、后缀、包含等。
3. 伪类选择器：引入了新的伪类选择器，如:nth-child()、:nth-of-type()等。
4. 盒子模型：
5. 边框圆角（border-radius）：可以设置元素的边框圆角。
6. 阴影效果（box-shadow）：可以为元素添加阴影效果。
7. 盒子大小（box-sizing）：可以调整盒子模型的尺寸计算方式。
8. 背景和渐变：
9. 线性渐变（linear-gradient）：可以创建水平或垂直方向的渐变背景。
10. 径向渐变（radial-gradient）：可以创建从一个中心点向外扩散的渐变背景。
11. 文字和字体：
12. @font-face：允许在网页中引用自定义字体文件。
13. 文字阴影（text-shadow）：可以为文字添加阴影效果。
14. 多列文字（columns）：可以创建多列布局的文字。
15. 过渡和动画：
16. 过渡效果（transition）：可以实现元素在不同状态之间的平滑过渡。
17. 关键帧动画（@keyframes）：可以定义动画的关键帧和动画效果。
18. 动画属性（animation）：用于指定动画的持续时间、重复次数等属性。
19. 弹性布局（Flexbox）：
20. 引入了弹性布局模型，使元素在容器中的布局更加灵活和自适应。
21. 响应式布局（Media Queries）：
22. 可以根据不同的媒体查询条件应用不同的样式，实现响应式布局。
23. 变换和变形：
24. 2D变换（transform）：可以对元素进行平移、旋转、缩放等变换操作。
25. 3D变换（transform）：可以实现元素的三维空间变换效果。
26. 过滤器（Filter）：
27. 可以应用各种视觉效果和图像处理效果，如模糊、亮度、对比度等。
28. 多列布局（Multicolumn Layout）：
29. 可以将内容分为多列进行布局。

以上只是 CSS3 中的一些常见新特性，还有许多其他的新特性和模块，使得开发者可以更加灵活和高效地进行样式设计和布局。

418.postcss 是什么，作用是啥？【热度: 1,155】【CSS】

关键词：postcss 作用、css 预处理、css 模块化

概念与作用

PostCSS 是一个用 JavaScript 编写的工具，用于对 CSS 进行转换和处理。它可以通过插件机制对 CSS 进行各种自定义的转换操作，从而扩展 CSS 的功能和语法。

PostCSS 的作用主要有以下几个方面：

1. CSS 预处理器：PostCSS 可以像 Sass 或 Less 一样用于编写更简洁、可维护的 CSS 代码。通过使用类似于变量、嵌套、Mixin 等功能，可以提高 CSS 开发的效率和灵活性。
2. 自动添加浏览器前缀：PostCSS 可以根据配置自动为 CSS 属性添加适应不同浏览器的前缀，解决浏览器兼容性问题。
3. CSS 模块化：PostCSS 可以使用类似于 CSS Modules 的功能，将 CSS 代码分割为独立的模块，避免样式冲突，提供更好的可维护性和代码复用性。
4. 代码优化和压缩：PostCSS 提供了一些插件，可以对 CSS 代码进行优化和压缩，减小文件大小，提高加载性能。
5. 编写自定义插件：PostCSS 的插件机制非常灵活，可以根据项目需求编写自定义的插件，进行各种 CSS 转换和处理操作，如自定义属性、自定义函数等。

可以用于增强 CSS 的能力，并提供更好的开发体验和效果优化。它的灵活性和可扩展性使得开发者可以根据项目需求选择和定制相应的插件，实现对 CSS 的定制化处理。

postcss css 模块化 和 css-loader 模块化有什么区别？

PostCSS 的 CSS 模块化和 css-loader 的模块化是两种不同的概念和实现方式。

1. CSS 模块化 (PostCSS): CSS 模块化是指使用 PostCSS 插件或工具来实现将 CSS 代码拆分为独立的模块，以解决样式冲突和提供更好的可维护性和代码复用性。通过使用类似于 CSS Modules 的功能，每个模块都有自己的作用域，样式定义不会影响其他模块，同时还可以通过类似于变量、嵌套、Mixin 等功能来增强 CSS 的编写能力。CSS 模块化通常需要使用 PostCSS 插件，如 postcss-modules、css-modules 等。
2. CSS 模块化 (css-loader): css-loader 是 Webpack 生态系统中的一个模块化工具，用于处理 CSS 文件。它的模块化功能是通过将 CSS 文件转换为 JavaScript 模块来实现的。每个 CSS 类名都被转换为一个唯一的标识符，以确保样式的唯一性和隔离性。在使用 css-loader 时，需要将 CSS 文件引入 JavaScript 模块中，并通过 JavaScript 代码来操作样式。

区别：

• PostCSS 的 CSS 模块化是在 CSS 层面上进行的，通过插件的方式对 CSS 代码进行拆分和处理，提供更好的作用域隔离和编写能力。
• css-loader 的模块化是在构建工具层面上进行的，将 CSS 文件转换为 JavaScript 模块，通过 JavaScript 代码来操作样式。
• PostCSS 的 CSS 模块化更加灵活，可以根据项目需求选择和定制相应的插件来实现不同的功能。
• css-loader 的模块化是集成在 Webpack 构建流程中的一部分，与模块化开发紧密结合，适用于前端项目的构建和打包过程。

419.css 栅格布局是什么，如何实现【热度: 368】【CSS】

关键词：栅格布局、grid 布局

CSS 栅格布局是一种用于创建响应式网格系统的布局技术。它基于将页面分为等宽的列，并使用行来组织内容。栅格布局提供了一种灵活的方式来创建自适应的网格布局，以便在不同屏幕尺寸和设备上显示良好。

实现 CSS 栅格布局的方法有多种，以下是一种常见的实现方式：

1. HTML 结构：使用 <div> 元素创建栅格布局的容器，并在容器内添加栅格列元素。

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <!-- ... -->
</div>

2. CSS 样式：为容器和栅格列元素定义样式。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 创建三列，每列等宽 */
    gap: 10px; /* 列之间的间隔 */
}

.grid-item {
    background-color: #ccc;
    padding: 10px;
}

上述示例中，通过设置 display: grid; 将容器设为栅格布局。使用 grid-template-columns 定义栅格的列数和宽度，这里使用 repeat(3, 1fr) 表示创建三列，每列宽度相等。通过 gap 属性设置列之间的间隔。栅格列元素则可以按需添加，根据需要进行样式设置。

通过以上方式，可以快速实现简单的 CSS 栅格布局。根据实际需求，还可以添加更多的样式和调整布局参数，如自适应布局、媒体查询等，以适应不同的屏幕尺寸和设备。

420.详细介绍一下 CSS Grid 布局【热度: 370】【CSS】

关键词：栅格布局、grid 布局

CSS Grid 布局是一种强大的二维网格布局系统，它允许开发者以更灵活的方式创建复杂的网页布局。通过将页面划分为行和列，开发者可以精确控制元素的位置和尺寸，并在不同屏幕尺寸下实现响应式布局。

以下是 CSS Grid 布局的一些关键概念和特性：

1. 网格容器（Grid Container）：使用 display: grid; 将一个元素设置为网格容器。它是网格布局的父元素，内部的子元素将参与布局。
2. 网格项目（Grid Item）：网格容器中的子元素称为网格项目。每个网格项目可以占据一个或多个网格单元，形成网格布局。
3. 网格行（Grid Row）和网格列（Grid Column）：网格布局由行和列组成。通过定义网格行和网格列，可以将网格划分为不同的区域。
4. 网格单元（Grid Cell）：网格单元是网格中的每个交叉点，形成的矩形区域。网格项目可以跨越多个网格单元。
5. 网格线（Grid Line）：网格线是划分网格行和网格列的线条。可以通过指定网格线的位置和名称来控制布局。
6. 网格轨道（Grid Track）：网格轨道是相邻网格线之间的空间，用于确定网格单元的尺寸和位置。

通过使用 CSS 属性和值，可以对网格布局进行进一步控制，例如：

• grid-template-rows 和 grid-template-columns：用于定义网格的行和列的大小和数量。
• grid-gap：用于设置网格行和列之间的间隔。
• grid-auto-rows 和 grid-auto-columns：用于定义自动创建的行和列的大小。
• grid-template-areas：用于定义网格布局的区域和位置。
• grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：用于控制网格项目在网格中的位置。

CSS Grid 布局的优势包括：

• 灵活的布局：通过定义网格行和列，可以实现复杂的布局需求，如等宽列、自适应布局、多列换行等。
• 响应式设计：可以使用媒体查询和自动调整来实现在不同屏幕尺寸下的布局变化。
• 简化的嵌套布局：与传统的 float 和 position 布局相比，CSS Grid 布局可以更轻松地实现多层嵌套的布局。
• 对齐和对称：通过对网

格行和列进行对齐和调整，可以实现元素的水平和垂直对齐，以及对称布局。

总之，CSS Grid 布局为开发者提供了更强大、灵活和直观的布局工具，使网页布局更加简单和可控，同时具备响应式和可扩展性。

当涉及到 CSS Grid 布局的属性和值时，以下是一些常用的属性和相应的作用的表格示例：

下面是CSS Grid布局中常用的属性和值，以及它们的作用：

这些属性和值可以用于创建网格布局，并控制网格项目在网格中的位置和尺寸。通过定义网格的行和列，以及对齐方式，可以实现灵活的网页布局。可以通过设置网格的大小、间距和自动创建行列等属性，实现不同的布局需求。同时，通过调整网格项目的起始和结束位置，以及对齐方式，可以精确控制元素在网格中的放置方式。

421.html 元素节点上， 有多个 class 名称，这几个class 名称对应的样式渲染优先级是如何的？【热度: 769】【CSS】

关键词：class 名称样式优先级

当一个HTML元素节点上有多个class名称，并且这些class名称对应的样式存在冲突时，CSS的渲染优先级遵循以下规则：

1. 内联样式（Inline Styles）具有最高优先级。如果在元素节点的style属性中定义了内联样式，它将覆盖所有其他样式规则。
2. 如果多个class名称对应的样式规则具有相同的优先级，将根据它们在HTML文档中出现的顺序进行应用。后面出现的样式规则将覆盖先前出现的规则。
3. 
   

如果不同class名称对应的样式规则具有不同的优先级，将根据选择器的权重来决定应用的样式规则。选择器的权重由选择器类型、选择器的组合和使用的选择器数量等因素确定。一般而言，ID选择器的权重最高，然后是类选择器和属性选择器，最后是元素选择器和伪类选择器。

总结起来，多个class名称对应的样式渲染优先级主要受到样式规则的具体定义和选择器的权重影响。如果样式规则具有相同的优先级，则根据它们在HTML文档中的出现顺序进行应用。如果样式规则具有不同的优先级，则根据选择器的权重来决定应用的样式规则。

422.如何避免全局样式污染？【热度: 744】【CSS】

关键词：避免样式污染、css 模块化

要避免全局样式污染，可以采取以下几种方式：

1. 使用命名约定：给不同组件、模块或页面的样式类名添加特定的前缀，以确保它们的作用范围只在对应的组件、模块或页面内生效。例如，使用 BEM（Block Element Modifier）命名约定可以将样式类名划分为块、元素和修饰符，以实现更明确的样式隔离。
2. 使用 CSS-in-JS：使用 CSS-in-JS 技术，将样式直接与组件绑定，可以避免全局样式的冲突。每个组件都有自己的样式定义，不会影响其他组件。
3. 使用 CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，它通过将 CSS 文件与组件绑定，在构建过程中自动生成唯一的类名，从而实现样式的局部作用域。这样可以避免全局样式冲突。
4. 使用作用域限定符：使用 CSS 预处理器（如 Sass 或 Less）的作用域限定符（如父选择器 &）来限制样式的作用范围。通过嵌套样式规则，并使用作用域限定符，可以确保样式仅应用于特定的父元素。
5. 使用样式重置/规范：使用样式重置或规范库，如 Normalize.css，可以消除浏览器默认样式的差异，以确保在不同浏览器下呈现一致的样式，并避免全局样式污染。
6. 使用模块化开发框架：使用诸如 React、Vue 或 Angular 等模块化开发框架，它们提供了组件化的开发模式，每个组件具有独立的样式作用域，可以避免全局样式的冲突。

有哪些工具库可以帮助避免全局样式污染

以下是一些常用的工具库和技术，可以帮助避免全局样式污染：

1. CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，可以将样式文件与组件绑定，生成唯一的类名，实现样式的局部作用域。常见的 CSS Modules 实现包括 webpack 的 css-loader 和 vue-style-loader。
2. CSS-in-JS：CSS-in-JS 是一种将 CSS 样式直接写在 JavaScript 代码中的技术，通过将样式与组件绑定，可以实现样式的局部作用域。常见的 CSS-in-JS 工具库有 styled-components、Emotion、Vue的 scoped CSS 等。
3. BEM（Block Element Modifier）命名约定：BEM 是一种命名约定，通过给样式类名添加特定前缀来区分不同组件或元素的样式。使用 BEM 命名约定可以避免样式类名冲突，实现样式的隔离。
4. CSS Reset/Normalize：CSS Reset 或 Normalize.css 是一种重置或规范化浏览器默认样式的方法，通过统一浏览器样式差异，避免全局样式污染。
5. PostCSS 插件：PostCSS 是一个强大的 CSS 处理工具，可以通过使用各种插件来帮助避免全局样式污染。例如，postcss-modules 可以将样式文件转换为 CSS Modules 格式，postcss-preset-env 可以根据目标浏览器自动添加前缀。
6. CSS 预处理器：CSS 预处理器如 Sass 或 Less 提供了作用域限定符和嵌套样式规则的功能，可以帮助限制样式的作用范围，避免全局样式冲突。

这些工具库和技术可以根据项目需求选择适合的方式来避免全局样式污染。每种方式都有其优势和适用场景，根据个人偏好和项目特点选择合适的工具库和技术进行开发。