` 元素创建栅格布局的容器，并在容器内添加栅格列元素。\n\n```html\n

Item 1

Item 2

Item 3

\n \n

\n```\n\n2. CSS 样式：为容器和栅格列元素定义样式。\n\n```css\n.grid-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 创建三列，每列等宽 */\n gap: 10px; /* 列之间的间隔 */\n}\n\n.grid-item {\n background-color: #ccc;\n padding: 10px;\n}\n```\n\n上述示例中，通过设置 `display: grid;` 将容器设为栅格布局。使用 `grid-template-columns` 定义栅格的列数和宽度，这里使用 `repeat(3, 1fr)` 表示创建三列，每列宽度相等。通过 `gap` 属性设置列之间的间隔。栅格列元素则可以按需添加，根据需要进行样式设置。\n\n通过以上方式，可以快速实现简单的 CSS 栅格布局。根据实际需求，还可以添加更多的样式和调整布局参数，如自适应布局、媒体查询等，以适应不同的屏幕尺寸和设备。\n",{"_58":236,"_174":144,"_175":144,"_176":144,"_177":144,"_178":144,"_179":144,"_180":144,"_181":144,"_182":144},"https://api.github.com/repos/pro-collection/interview-question/issues/419/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/419/timeline",{"_58":239,"_60":61,"_62":240,"_64":241,"_66":242,"_68":243,"_70":244,"_72":245,"_74":246,"_76":247,"_78":248,"_111":249,"_124":125,"_126":24,"_127":251,"_129":252,"_151":144,"_145":254,"_147":254,"_150":-5,"_154":-5,"_155":156,"_106":-5,"_157":-5,"_158":255,"_163":256,"_169":257,"_171":258,"_183":260,"_185":-5,"_186":-5,"_187":-5,"_188":189},"https://api.github.com/repos/pro-collection/interview-question/issues/418","https://api.github.com/repos/pro-collection/interview-question/issues/418/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/418/comments","https://api.github.com/repos/pro-collection/interview-question/issues/418/events","https://github.com/pro-collection/interview-question/issues/418",1744052122,"I_kwDOJGDC6c5n9B-a",418,"postcss 是什么，作用是啥？【热度: 1,155】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[250],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":131,"_68":132,"_62":133,"_70":134,"_72":135,"_74":136,"_76":137,"_122":138,"_139":253,"_141":142,"_143":144,"_124":125,"_145":146,"_147":148,"_149":-5,"_150":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-06T14:59:03Z",{"_160":144,"_161":144,"_162":144},{"_165":144,"_166":144,"_167":144,"_168":144},"**关键词**：postcss 作用、css 预处理、css 模块化\n\n### 概念与作用\n\nPostCSS 是一个用 JavaScript 编写的工具，用于对 CSS 进行转换和处理。它可以通过插件机制对 CSS 进行各种自定义的转换操作，从而扩展 CSS 的功能和语法。\n\nPostCSS 的作用主要有以下几个方面：\n\n1. CSS 预处理器：PostCSS 可以像 Sass 或 Less 一样用于编写更简洁、可维护的 CSS 代码。通过使用类似于变量、嵌套、Mixin 等功能，可以提高 CSS 开发的效率和灵活性。\n\n2. 自动添加浏览器前缀：PostCSS 可以根据配置自动为 CSS 属性添加适应不同浏览器的前缀，解决浏览器兼容性问题。\n\n3. CSS 模块化：PostCSS 可以使用类似于 CSS Modules 的功能，将 CSS 代码分割为独立的模块，避免样式冲突，提供更好的可维护性和代码复用性。\n\n4. 代码优化和压缩：PostCSS 提供了一些插件，可以对 CSS 代码进行优化和压缩，减小文件大小，提高加载性能。\n\n5. 编写自定义插件：PostCSS 的插件机制非常灵活，可以根据项目需求编写自定义的插件，进行各种 CSS 转换和处理操作，如自定义属性、自定义函数等。\n\n可以用于增强 CSS 的能力，并提供更好的开发体验和效果优化。它的灵活性和可扩展性使得开发者可以根据项目需求选择和定制相应的插件，实现对 CSS 的定制化处理。\n\n### postcss css 模块化和 css-loader 模块化有什么区别？\n\nPostCSS 的 CSS 模块化和 css-loader 的模块化是两种不同的概念和实现方式。\n\n1. CSS 模块化 (PostCSS): CSS 模块化是指使用 PostCSS 插件或工具来实现将 CSS 代码拆分为独立的模块，以解决样式冲突和提供更好的可维护性和代码复用性。通过使用类似于 CSS Modules 的功能，每个模块都有自己的作用域，样式定义不会影响其他模块，同时还可以通过类似于变量、嵌套、Mixin 等功能来增强 CSS 的编写能力。CSS 模块化通常需要使用 PostCSS 插件，如 postcss-modules、css-modules 等。\n\n2. CSS 模块化 (css-loader): css-loader 是 Webpack 生态系统中的一个模块化工具，用于处理 CSS 文件。它的模块化功能是通过将 CSS 文件转换为 JavaScript 模块来实现的。每个 CSS 类名都被转换为一个唯一的标识符，以确保样式的唯一性和隔离性。在使用 css-loader 时，需要将 CSS 文件引入 JavaScript 模块中，并通过 JavaScript 代码来操作样式。\n\n区别：\n- PostCSS 的 CSS 模块化是在 CSS 层面上进行的，通过插件的方式对 CSS 代码进行拆分和处理，提供更好的作用域隔离和编写能力。\n- css-loader 的模块化是在构建工具层面上进行的，将 CSS 文件转换为 JavaScript 模块，通过 JavaScript 代码来操作样式。\n- PostCSS 的 CSS 模块化更加灵活，可以根据项目需求选择和定制相应的插件来实现不同的功能。\n- css-loader 的模块化是集成在 Webpack 构建流程中的一部分，与模块化开发紧密结合，适用于前端项目的构建和打包过程。\n\n\n",{"_58":259,"_174":144,"_175":144,"_176":144,"_177":144,"_178":144,"_179":144,"_180":144,"_181":144,"_182":144},"https://api.github.com/repos/pro-collection/interview-question/issues/418/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/418/timeline",{"_58":262,"_60":61,"_62":263,"_64":264,"_66":265,"_68":266,"_70":267,"_72":268,"_74":269,"_76":270,"_78":271,"_111":272,"_124":125,"_126":24,"_127":274,"_129":275,"_151":144,"_145":277,"_147":278,"_150":-5,"_154":-5,"_155":156,"_106":-5,"_157":-5,"_158":279,"_163":280,"_169":281,"_171":282,"_183":284,"_185":-5,"_186":-5,"_187":-5,"_188":189},"https://api.github.com/repos/pro-collection/interview-question/issues/417","https://api.github.com/repos/pro-collection/interview-question/issues/417/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/417/comments","https://api.github.com/repos/pro-collection/interview-question/issues/417/events","https://github.com/pro-collection/interview-question/issues/417",1744025833,"I_kwDOJGDC6c5n87jp",417,"CSS3 中有哪些新特性【热度: 1,102】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[273],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":131,"_68":132,"_62":133,"_70":134,"_72":135,"_74":136,"_76":137,"_122":138,"_139":276,"_141":142,"_143":144,"_124":125,"_145":146,"_147":148,"_149":-5,"_150":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-06T14:45:05Z","2023-06-06T14:45:47Z",{"_160":144,"_161":144,"_162":144},{"_165":144,"_166":144,"_167":144,"_168":144},"CSS3引入了许多新特性和模块，以下是一些常见的CSS3新特性：\n\n1. 选择器增强：\n - 属性选择器：支持更多的属性选择器，如属性值前缀、后缀、包含等。\n - 伪类选择器：引入了新的伪类选择器，如`:nth-child()`、`:nth-of-type()`等。\n\n2. 盒子模型：\n - 边框圆角（border-radius）：可以设置元素的边框圆角。\n - 阴影效果（box-shadow）：可以为元素添加阴影效果。\n - 盒子大小（box-sizing）：可以调整盒子模型的尺寸计算方式。\n\n3. 背景和渐变：\n - 线性渐变（linear-gradient）：可以创建水平或垂直方向的渐变背景。\n - 径向渐变（radial-gradient）：可以创建从一个中心点向外扩散的渐变背景。\n\n4. 文字和字体：\n - @font-face：允许在网页中引用自定义字体文件。\n - 文字阴影（text-shadow）：可以为文字添加阴影效果。\n - 多列文字（columns）：可以创建多列布局的文字。\n\n5. 过渡和动画：\n - 过渡效果（transition）：可以实现元素在不同状态之间的平滑过渡。\n - 关键帧动画（@keyframes）：可以定义动画的关键帧和动画效果。\n - 动画属性（animation）：用于指定动画的持续时间、重复次数等属性。\n\n6. 弹性布局（Flexbox）：\n - 引入了弹性布局模型，使元素在容器中的布局更加灵活和自适应。\n\n7. 响应式布局（Media Queries）：\n - 可以根据不同的媒体查询条件应用不同的样式，实现响应式布局。\n\n8. 变换和变形：\n - 2D变换（transform）：可以对元素进行平移、旋转、缩放等变换操作。\n - 3D变换（transform）：可以实现元素的三维空间变换效果。\n\n9. 过滤器（Filter）：\n - 可以应用各种视觉效果和图像处理效果，如模糊、亮度、对比度等。\n\n10. 多列布局（Multicolumn Layout）：\n - 可以将内容分为多列进行布局。\n\n以上只是 CSS3 中的一些常见新特性，还有许多其他的新特性和模块，使得开发者可以更加灵活和高效地进行样式设计和布局。\n",{"_58":283,"_174":144,"_175":144,"_176":144,"_177":144,"_178":144,"_179":144,"_180":144,"_181":144,"_182":144},"https://api.github.com/repos/pro-collection/interview-question/issues/417/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/417/timeline",{"_58":286,"_60":61,"_62":287,"_64":288,"_66":289,"_68":290,"_70":291,"_72":292,"_74":293,"_76":294,"_78":295,"_111":296,"_124":125,"_126":24,"_127":298,"_129":299,"_151":144,"_145":301,"_147":301,"_150":-5,"_154":-5,"_155":156,"_106":-5,"_157":-5,"_158":302,"_163":303,"_169":304,"_171":305,"_183":307,"_185":-5,"_186":-5,"_187":-5,"_188":189},"https://api.github.com/repos/pro-collection/interview-question/issues/416","https://api.github.com/repos/pro-collection/interview-question/issues/416/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/416/comments","https://api.github.com/repos/pro-collection/interview-question/issues/416/events","https://github.com/pro-collection/interview-question/issues/416",1744012227,"I_kwDOJGDC6c5n84PD",416,"css 中伪元素和伪类的区别和作用【热度: 429】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[297],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":131,"_68":132,"_62":133,"_70":134,"_72":135,"_74":136,"_76":137,"_122":138,"_139":300,"_141":142,"_143":144,"_124":125,"_145":146,"_147":148,"_149":-5,"_150":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-06T14:38:06Z",{"_160":144,"_161":144,"_162":144},{"_165":144,"_166":144,"_167":144,"_168":144},"**关键词**：伪元素和伪类\n\n伪元素和伪类是 CSS 中用于选择和样式化元素的特殊标记，它们有一些区别和不同的作用。\n\n伪元素（Pseudo-Element）：\n- 表示文档中不存在的元素，用于在元素的特定位置插入样式化内容。\n- 通过双冒号 `::` 来表示，例如 `::before`、`::after`。\n- 可以使用伪元素为元素添加额外的内容、样式或装饰，如插入文本、图标、边框等。\n- 通过 `content` 属性设置伪元素的内容。\n- 伪元素在文档中并不存在，因此无法通过 JavaScript 直接操作它们。\n\n伪类（Pseudo-Class）：\n- 表示元素在特定状态下的样式，例如鼠标悬停、被点击、处于某个状态等。\n- 通过单冒号 `:` 来表示，例如 `:hover`、`:active`。\n- 用于选择符合特定条件的元素，如选择第一个子元素、选择奇偶行等。\n- 伪类通过 CSS 规则选择元素的特定状态或条件来应用样式，与元素本身相关。\n- 伪类可以通过 JavaScript 动态地添加或移除，以改变元素的状态。\n\n总结：\n- 伪元素用于创建不存在于文档结构中的元素，并为其添加样式化内容。\n- 伪类用于选择元素的特定状态或条件，并为其应用样式。\n- 伪元素使用双冒号 `::` 表示，伪类使用单冒号 `:` 表示。\n- 伪元素在文档中并不存在，而伪类选择的是实际存在的元素。\n\n使用伪元素和伪类可以在 CSS 中实现更多的样式化效果和交互行为，使页面更加丰富和动态。\n",{"_58":306,"_174":144,"_175":144,"_176":144,"_177":144,"_178":144,"_179":144,"_180":144,"_181":144,"_182":144},"https://api.github.com/repos/pro-collection/interview-question/issues/416/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/416/timeline",{"_58":309,"_60":61,"_62":310,"_64":311,"_66":312,"_68":313,"_70":314,"_72":315,"_74":316,"_76":317,"_78":318,"_111":319,"_124":125,"_126":24,"_127":321,"_129":322,"_151":144,"_145":334,"_147":335,"_150":-5,"_154":-5,"_155":156,"_106":-5,"_157":-5,"_158":336,"_163":337,"_169":338,"_171":339,"_183":341,"_185":-5,"_186":-5,"_187":-5,"_188":189},"https://api.github.com/repos/pro-collection/interview-question/issues/415","https://api.github.com/repos/pro-collection/interview-question/issues/415/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/415/comments","https://api.github.com/repos/pro-collection/interview-question/issues/415/events","https://github.com/pro-collection/interview-question/issues/415",1744005551,"I_kwDOJGDC6c5n82mv",415,"css 隐藏元素的方法有哪些【热度: 1,076】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[320],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":323,"_68":324,"_62":325,"_70":326,"_72":327,"_74":189,"_76":328,"_122":329,"_139":330,"_141":331,"_143":144,"_124":125,"_145":332,"_147":333,"_149":-5,"_150":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-06-06T14:34:22Z","2023-06-06T14:34:23Z",{"_160":144,"_161":144,"_162":144},{"_165":144,"_166":144,"_167":144,"_168":144},"**关键词**：隐藏元素\n\n有多种方法可以隐藏元素的CSS。\n\n1. `display: none;`：将元素完全隐藏，不占据任何空间。\n2. `visibility: hidden;`：将元素隐藏，但仍占据空间。\n3. `opacity: 0;`：将元素透明化，但仍占据空间。\n4. `position: absolute; left: -9999px;`：将元素定位到屏幕外部，不显示在可见区域。\n5. `height: 0; width: 0; overflow: hidden;`：将元素高度和宽度设为0，同时隐藏溢出内容。\n6. `clip-path: polygon(0 0, 0 0, 0 0);`：使用剪切路径将元素隐藏。\n\n这些方法可以根据具体的需求选择合适的方式来隐藏元素。使用 `display: none;` 是最常见和常用的隐藏元素的方法，它会完全移除元素并且不占据页面空间。而其他方法则可以根据需要在元素隐藏的同时保留占位空间或其他特殊效果。\n\n\n**`display: none;`、`visibility: hidden;` 和 `opacity: 0;` 区别是啥**\n\n`display: none;`、`visibility: hidden;` 和 `opacity: 0;` 是用于隐藏元素的CSS属性，它们之间有一些区别：\n\n1. `display: none;`：该属性会完全移除元素，并且不占据页面空间。隐藏后的元素在文档流中不可见，也不会影响其他元素的布局。相当于元素被完全移除了，无法通过任何方式找到它。当需要彻底从页面中移除元素时，可以使用该属性。\n\n2. `visibility: hidden;`：该属性会将元素隐藏，但仍然占据页面空间。隐藏后的元素在文档流中保留了位置，仅仅是不可见了。元素隐藏后不会影响其他元素的布局。可以通过JavaScript或其他方式找到该元素，并且可以在需要时将其重新显示。\n\n3. `opacity: 0;`：该属性将元素设置为完全透明。元素仍然占据页面空间，但是不可见。透明元素在文档流中保留位置，并且不会影响其他元素的布局。可以通过JavaScript或其他方式找到该元素，并在需要时将其重新设置为可见。\n\n综上所述，`display: none;` 完全移除元素并且不占据空间，`visibility: hidden;` 保留元素位置但不可见，`opacity: 0;` 使元素透明但仍然占据空间。根据具体需求选择合适的属性来隐藏元素。\n",{"_58":340,"_174":144,"_175":144,"_176":144,"_177":144,"_178":144,"_179":144,"_180":144,"_181":144,"_182":144},"https://api.github.com/repos/pro-collection/interview-question/issues/415/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/415/timeline",{"_58":343,"_60":61,"_62":344,"_64":345,"_66":346,"_68":347,"_70":348,"_72":349,"_74":350,"_76":351,"_78":352,"_111":353,"_124":125,"_126":24,"_127":368,"_129":369,"_151":144,"_145":382,"_147":383,"_150":-5,"_154":-5,"_155":156,"_106":-5,"_157":-5,"_158":384,"_163":385,"_169":386,"_171":387,"_183":389,"_185":-5,"_186":-5,"_187":-5,"_188":189},"https://api.github.com/repos/pro-collection/interview-question/issues/413","https://api.github.com/repos/pro-collection/interview-question/issues/413/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/413/comments","https://api.github.com/repos/pro-collection/interview-question/issues/413/events","https://github.com/pro-collection/interview-question/issues/413",1740409549,"I_kwDOJGDC6c5nvIrN",413,"什么是正向代理，反向代理【热度: 1,294】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[354,361],{"_70":355,"_72":356,"_58":357,"_117":358,"_119":359,"_121":24,"_122":360},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":362,"_72":363,"_58":364,"_117":365,"_119":366,"_121":24,"_122":367},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米","ededed","公司标签",[],{"_58":370,"_68":371,"_62":372,"_70":373,"_72":374,"_74":375,"_76":376,"_122":377,"_139":378,"_141":379,"_143":144,"_124":125,"_145":380,"_147":381,"_149":-5,"_150":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},454,"2023-03-06T15:00:27Z","2025-09-07T06:21:17Z","2023-06-04T14:38:13Z","2023-06-04T14:38:14Z",{"_160":144,"_161":144,"_162":144},{"_165":144,"_166":144,"_167":144,"_168":144},"**关键词**：正向代理反向代理概念\n\n### 概念\n\n正向代理（Forward Proxy）和反向代理（Reverse Proxy）都是常见的代理服务器架构，用于在客户端与目标服务器之间进行中转和处理请求的工作。它们的区别在于代理的位置和作用方式不同。\n\n1. 正向代理：\n - 代理位于客户端与目标服务器之间，代理服务器充当客户端的代表。\n - 客户端发起请求时，请求首先发送给正向代理服务器，然后由代理服务器转发请求给目标服务器，目标服务器将响应返回给代理服务器，最后代理服务器再将响应返回给客户端。\n - 客户端并不直接与目标服务器通信，而是通过正向代理服务器进行中转。\n - 正向代理常用于客户端访问互联网，提供一些特定的服务，如匿名访问、访问控制、缓存、安全性等。\n\n2. 反向代理：\n - 代理位于目标服务器与客户端之间，代理服务器充当目标服务器的代表。\n - 客户端发起请求时，请求直接发送给反向代理服务器，然后由代理服务器根据配置和负载均衡策略，将请求转发给后端的目标服务器。\n - 客户端并不知道实际提供服务的是哪个目标服务器，而是与反向代理服务器进行通信。\n - 反向代理常用于负载均衡、高可用性、安全性等方面，可以隐藏后端服务器的真实信息，并提供更好的性能和可扩展性。\n \n\n### 区别\n\n下面是正向代理和反向代理的区别以及它们的特点，用表格形式表示：\n\n| 特点 | 正向代理 | 反向代理 |\n|------------------|------------------------------|------------------------------|\n| 位置 | 位于客户端与目标服务器之间 | 位于目标服务器与客户端之间 |\n| 代理角色 | 代理服务器充当客户端的代表 | 代理服务器充当目标服务器的代表|\n| 通信流向 | 客户端 -> 代理服务器 -> 目标服务器 | 客户端 -> 代理服务器 -> 目标服务器 |\n| 目的 | 隐藏客户端的真实信息，提供访问控制、缓存、安全性等 | 隐藏目标服务器的真实信息，提供负载均衡、高可用性、安全性等 |\n| 请求方式 | 客户端发起请求给代理服务器，代理服务器转发请求给目标服务器 | 客户端发起请求给代理服务器，代理服务器根据配置和负载均衡策略转发请求给目标服务器 |\n| 客户端感知 | 客户端知道自己使用了代理服务器 | 客户端不知道实际提供服务的是哪个目标服务器 |\n| 目标服务器感知 | 目标服务器感知到代理服务器的存在 | 目标服务器不感知客户端使用了反向代理 |\n| 应用场景 | 客户端访问互联网，提供匿名访问、访问控制、缓存等特定服务 | 负载均衡、高可用性、安全性、隐藏真实服务器信息等 |\n| 示例 | 企业内网用户通过代理服务器访问互联网 | 多个服务器集群通过反向代理提供服务 |\n\n这个表格总结了正向代理和反向代理的一些基本特点和区别，以及它们在网络通信中的应用场景。需要根据具体的需求和场景来选择适合的代理方式。\n\n\n**总结**：\n正向代理位于客户端与目标服务器之间，代理服务器充当客户端的代表；反向代理位于目标服务器与客户端之间，代理服务器充当目标服务器的代表。正向代理隐藏了客户端的真实信息，反向代理隐藏了目标服务器的真实信息。它们的作用和使用场景不同，但都能提供一定程度的代理和中转功能，增加了网络通信的灵活性和安全性。\n",{"_58":388,"_174":144,"_175":144,"_176":144,"_177":144,"_178":144,"_179":144,"_180":144,"_181":144,"_182":144},"https://api.github.com/repos/pro-collection/interview-question/issues/413/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/413/timeline",{"_58":391,"_60":61,"_62":392,"_64":393,"_66":394,"_68":395,"_70":396,"_72":397,"_74":398,"_76":399,"_78":400,"_111":401,"_124":125,"_126":24,"_127":408,"_129":409,"_151":144,"_145":411,"_147":412,"_150":-5,"_154":-5,"_155":156,"_106":-5,"_157":-5,"_158":413,"_163":414,"_169":415,"_171":416,"_183":418,"_185":-5,"_186":-5,"_187":-5,"_188":189},"https://api.github.com/repos/pro-collection/interview-question/issues/412","https://api.github.com/repos/pro-collection/interview-question/issues/412/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/412/comments","https://api.github.com/repos/pro-collection/interview-question/issues/412/events","https://github.com/pro-collection/interview-question/issues/412",1740406213,"I_kwDOJGDC6c5nvH3F",412,"什么是同源策略【热度: 1,430】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[402,403],{"_70":355,"_72":356,"_58":357,"_117":358,"_119":359,"_121":24,"_122":360},{"_70":404,"_72":405,"_58":406,"_117":407,"_119":366,"_121":24,"_122":367},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",[],{"_58":323,"_68":324,"_62":325,"_70":326,"_72":327,"_74":189,"_76":328,"_122":329,"_139":410,"_141":331,"_143":144,"_124":125,"_145":332,"_147":333,"_149":-5,"_150":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-04T14:31:40Z","2023-06-04T14:31:41Z",{"_160":144,"_161":144,"_162":144},{"_165":144,"_166":144,"_167":144,"_168":144},"**关键词**：同源策略限制了什么资源\n\n同源策略（Same-Origin Policy）是一种浏览器安全机制，用于限制不同源（域名、协议、端口）之间的交互。它是一种重要的安全措施，用于保护用户的隐私和安全，防止恶意网站通过跨域请求获取用户的敏感信息或进行恶意操作。\n\n同源策略要求网页资源（如JavaScript、CSS、图片等）只能与来源相同的资源进行交互，即只能与相同域名、相同协议和相同端口的资源进行通信。例如，一个网页加载自`https://www.example.com`域名下的资源，就只能与同一域名下的其他资源进行交互，无法直接访问其他域名的资源。\n\n同源策略主要限制了以下几种行为：\n\n1. DOM访问限制：不同源的页面无法通过JavaScript等方式直接访问对方的DOM元素，即无法获取或修改对方页面的内容。\n\n2. Cookie、LocalStorage和IndexDB限制：不同源的页面无法读取对方设置的Cookie、LocalStorage和IndexDB存储。\n\n3. AJAX请求限制：XMLHttpRequest、Fetch等网络请求在跨域时受到限制，通常无法发送跨域请求。\n\n同源策略的存在有效地防止了跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全威胁。如果需要在不同源之间进行数据交互，可以通过服务器端的代理或使用CORS（跨源资源共享）等技术来实现。\n\n**需要注意的是，同源策略只是浏览器的安全策略之一，而并非所有的网络请求都受到同源策略的限制。例如，通过`