前端面试题2（HTML+CSS）

type
status
date
slug
summary
tags
category
icon
password

31. 请解释一下什么是浏览器的渲染流程？

回答：
浏览器的渲染流程指的是浏览器将 HTML、CSS 和 JavaScript 转换为视觉页面的过程。主要步骤包括：
  1. 解析 HTML，构建 DOM 树（Document Object Model）：
      • 浏览器从上到下解析 HTML，生成 DOM 树，表示页面的内容结构。
  1. 解析 CSS，生成 CSSOM 树（CSS Object Model）：
      • 解析 CSS 样式，包括外部样式表、内部样式和内联样式，生成 CSSOM 树，表示样式规则。
  1. 构建渲染树（Render Tree）：
      • 将 DOM 树和 CSSOM 树结合，生成渲染树，包含所有需要显示的节点及其样式。
  1. 布局（Layout）：
      • 确定每个节点在屏幕上的位置和尺寸，即计算元素的几何信息，称为“回流（Reflow）”。
  1. 绘制（Painting）：
      • 将渲染树中的节点绘制到屏幕，填充颜色、文字、图像等，称为“重绘（Repaint）”。
  1. 合成层和显示（Composite Layers）：
      • 对复杂的页面，浏览器会将不同的部分分成多个图层，最后合成并显示。
额外信息：
  • JavaScript 执行：如果遇到 <script> 标签，浏览器会暂停解析 HTML，先执行 JavaScript，可能会修改 DOM。
  • 阻塞渲染：外部 CSS 文件会阻塞渲染树的构建，因此通常将关键 CSS 内联或将脚本放在底部，提高渲染速度。

32. 如何实现一个自适应的等比缩放矩形，如保持 16:9 的宽高比，无论屏幕尺寸如何变化？

回答：
可以利用元素的 padding 属性与宽度的百分比关系来实现。因为在 CSS 中，padding-top 或 padding-bottom 的百分比值是相对于元素的宽度计算的。
示例：
解释：
  • padding-top: 56.25%;：设置了一个基于宽度的上内边距，形成了所需的高度比例。
  • 绝对定位子元素：将子元素定位，使其填充整个容器，实现内容的覆盖。
  • 自适应性：无论容器宽度如何变化，高度都会按照 16:9 的比例调整。

33. 请解释 JavaScript 中 this 的含义，以及在不同情况下它的值是如何确定的。

回答：
this 是 JavaScript 中的一个关键字，指向函数执行时的上下文对象，其值取决于函数的调用方式。
主要情况：
  1. 全局作用域或普通函数调用：
      • 在非严格模式下，this 指向全局对象（浏览器中是 window）。
      • 在严格模式下，this 为 undefined。
  1. 对象方法调用：
      • 当函数作为对象的方法被调用时，this 指向该对象。
  1. 构造函数调用（使用 new 关键字）：
      • 当使用 new 调用函数时，this 指向新创建的实例对象。
  1. call、apply、bind 显式绑定：
      • 使用 call 或 apply，this 被显式指定。
      • bind 返回一个新的函数，this 永久绑定为指定对象。
  1. 箭头函数：
      • 箭头函数没有自己的 this，this 值取决于其外层（定义时）的上下文。
额外信息：
  • 在事件处理器中，this 通常指向触发事件的元素。
  • 在类（Class）的实例方法中，this 指向实例对象。

34. 什么是 Shadow DOM，它的作用是什么？

回答：
Shadow DOM（影子 DOM） 是一种浏览器提供的用于封装组件内部实现的技术，使得组件的结构、样式与外部完全隔离。
作用：
  1. 封装性：
      • 组件内部的 DOM 节点和样式不会影响外部文档，外部的样式也不会影响组件内部。
  1. 避免冲突：
      • 防止命名冲突、样式污染，提高代码的可维护性和可靠性。
  1. 创建可复用的组件：
      • 开发者可以创建自定义元素，封装复杂功能，方便在不同项目中使用。
示例：
使用：
注意：
  • attachShadow({ mode: 'open' })：创建影子 DOM，mode 为 'open' 表示可以通过 element.shadowRoot 访问。
  • 样式封装：组件内的样式不会影响外部元素，外部也无法覆盖组件内的样式。

35. 如何使用纯 CSS 创建一个三角形？

回答：
可以利用元素的边框（border）属性来创建三角形。核心原理是设置一个零尺寸的元素，并通过透明和有色的边框来形成三角形形状。
示例：
解释：
  • 零宽高元素：设置 width 和 height 为 0。
  • 透明边框：左、右边框设置为透明，控制三角形的底边长度。
  • 有色边框：下边框设置颜色和宽度，形成三角形的高度。
方向变化：
  • 可以通过调整有色边框的位置来改变三角形的朝向。
示例：向右的三角形

36. 请比较响应式设计和自适应设计，它们有什么区别？

回答：
响应式设计（Responsive Design） 和 自适应设计（Adaptive Design） 都致力于提高网站在不同设备上的可用性，但方式不同。
响应式设计：
  • 特点：
    • 使用弹性网格、百分比布局和媒体查询，使页面根据屏幕尺寸动态缩放和调整布局。
    • 布局是流式的，随屏幕尺寸连续变化。
  • 优势：
    • 维护一套代码，适配各种屏幕尺寸。
    • 用户体验一致性更好。
  • 示例：
    自适应设计：
    • 特点：
      • 预先为特定的屏幕尺寸设计多个固定布局，当检测到设备屏幕尺寸时，加载相应的布局。
      • 布局在断点处发生突变，而非连续变化。
    • 优势：
      • 可以针对特定设备进行优化，提供最佳体验。
    • 示例：
      区别总结：
      • 布局方式：响应式是流式布局，自适应是固定布局的切换。
      • 开发复杂度：响应式需要更复杂的 CSS 技巧，自适应可能需要维护多套模板。

      37. 什么是视口（Viewport），如何在移动端正确设置它？

      回答：
      视口（Viewport） 是指网页内容在浏览器中可见的区域。在移动设备上，默认的视口宽度可能与设备实际宽度不一致，因此需要手动设置，以确保页面在移动设备上正确显示。
      正确设置视口的方法：
      在 HTML 的 <head> 部分，使用 <meta> 标签设置视口。
      示例：
      参数解释：
      • width=device-width：将视口的宽度设置为设备的宽度，以避免页面在移动设备上被缩小。
      • initial-scale=1.0：页面初始缩放比例为 1.0，不进行缩放。
      可选参数：
      • user-scalable=no：禁止用户手动缩放页面。
      • maximum-scale 和 minimum-scale：设置允许的最大和最小缩放比例。
      完整示例：
      注意事项：
      • 适配移动设备：正确设置视口可以防止字体过小和布局异常，提升移动端用户体验。
      • 与媒体查询配合：结合 CSS 媒体查询，实现更精细的响应式设计。

      38. 请解释 CSS 中的 calc() 函数及其应用。

      回答：
      calc() 是 CSS 提供的一个函数，允许在属性值中执行计算，支持加法、减法、乘法和除法运算，从而实现动态的样式。
      语法：
      示例：
      应用场景：
      1. 混合单位：当需要将百分比和像素、em 等单位结合使用。
        1. 布局调整：根据容器大小动态计算元素尺寸，适应不同屏幕。
          1. 响应式设计：结合媒体查询，实现更精细的控制。
            1. 解决盒模型问题：在 box-sizing 为 content-box 时，计算内边距和边框。
            注意事项：
            • 空格要求：运算符前后必须有空格，例如 calc(100% - 50px)，否则可能导致解析错误。
            • 浏览器兼容性：calc() 已被广泛支持，但在特定情况下仍需注意兼容性。

            39. 什么是 CSS 变量（自定义属性），如何使用？

            回答：
            CSS 变量（Custom Properties），也称为自定义属性，允许开发者在 CSS 中定义变量，提高样式的可复用性和灵活性。
            定义变量：
            • 变量名以 - 开头，通常定义在 :root 中，表示全局变量。
              使用变量：
              • 通过 var() 函数调用，支持设置默认值。
                优势：
                1. 维护性高：修改变量值即可全局生效，方便调整主题和风格。
                1. 动态性强：可以结合媒体查询、伪类等，实现响应式的变量值。
                  1. JavaScript 交互：可以通过 JavaScript 修改 CSS 变量，实现动态效果。
                    注意事项：
                    • 作用域：CSS 变量具有层叠性和继承性，根据需要可以在不同选择器下定义。
                    • 浏览器兼容性：IE 不支持 CSS 变量，需要考虑降级方案或使用后处理器。

                    40. 请解释 ARIA 和可访问性的重要性，以及如何在前端开发中实践。

                    回答：
                    ARIA（Accessible Rich Internet Applications） 是一套技术规范，旨在通过为网页添加可访问性信息，使残障人士能够更好地使用 Web 内容。
                    ARIA 的作用：
                    • 补充语义：为非语义化的元素（如 div、span）添加角色和状态信息，让辅助技术（如屏幕阅读器）理解其意义。
                    • 描述状态：通过aria-属性，描述元素的交互状态、属性等信息。
                    常用 ARIA 属性：
                    • role：定义元素的角色，如 button、navigation、alert。
                    • aria-label 和 aria-labelledby：为元素提供可访问的名称或描述。
                    • aria-hidden：指示元素是否对辅助技术可见。
                    • aria-disabled：指示元素是否不可用。
                    实践可访问性的方法：
                    1. 使用语义化的 HTML 标签：如 <header>、<nav>、<main>、<article> 等，提供自然的语义信息。
                    1. 为图像添加替代文本：使用 alt 属性描述图像内容。
                    1. 确保键盘可操作性：确保所有交互元素都可以通过键盘操作访问，如使用 tabindex。
                    1. 合理的颜色对比度：确保文本与背景之间有足够的对比度，方便视力障碍者阅读。
                    1. 提供跳过链接：允许用户跳过导航，直接进入主要内容。
                      1. 避免使用纯视觉提示：不要仅依靠颜色、位置等视觉元素传达信息。
                      重要性：
                      • 提升用户体验：为所有用户，包括有特殊需求的用户，提供友好的使用体验。
                      • 法律合规：在许多地区，网站需要满足可访问性标准以符合相关法律法规。
                      • SEO 优化：搜索引擎更容易理解语义化的内容，提高索引和排名。
                      工具和资源：
                      • 可访问性测试工具：如 Lighthouse、Wave、axe，可以检测网页中的可访问性问题。 s
                      • 学习资源：了解 WCAG（Web 内容可访问性指南）标准，提高可访问性意识。

                      41. 解释一下什么是 Web Components，它由哪几部分组成？

                      回答：
                      Web Components 是一组允许开发者创建可重用的、封装良好的自定义 HTML 元素的 Web 标准，包括：
                      1. Custom Elements（自定义元素）：
                          • 允许创建自定义的 HTML 元素，使用自定义的标签名。
                          • 通过定义类并继承 HTMLElement，然后使用 customElements.define 来注册。
                      1. Shadow DOM（影子 DOM）：
                          • 提供组件的封装，使内部 DOM 结构和样式与页面的其他部分隔离。
                          • 防止样式冲突，提高组件的可移植性。
                      1. HTML Templates（模板）：
                          • 使用 <template> 标签定义可重用的 HTML 片段，初始时不会被渲染。
                          • 可用于动态实例化内容，以提高性能。
                      1. HTML Imports（已废弃）：
                          • 以前用于导入 HTML 文档，但已被淘汰，建议使用 ES 模块或其他模块化方案替代。
                      优势：
                      • 可重用性：创建自包含的组件，便于在不同项目中复用。
                      • 封装性：内部实现细节不泄露，避免与外部代码冲突。
                      • 标准化：无需额外的库或框架即可使用。

                      42. 请解释一下 CSS 中的display: none;和visibility: hidden;的区别。

                      回答：
                      • display: none;：
                        • 元素被从文档流中移除，页面布局将忽略该元素，后续元素会补上位置。
                        • 不占据任何空间，元素的子元素也不可见。
                      • visibility: hidden;：
                        • 元素仍然保留在文档流中，占据原来的空间，但内容不可见。
                        • 子元素可以通过 visibility: visible; 重新显示。
                      区别总结：
                      • 布局影响：display: none; 移除元素，visibility: hidden; 保留空间。
                      • 子元素：display: none; 隐藏所有后代；visibility: hidden; 可让子元素显示。
                      应用场景：
                      • display: none;：想要完全移除元素，不影响布局时使用。
                      • visibility: hidden;：需要保留空间，避免布局跳动时使用。

                      43. 什么是 CSS 的z-index，如何在定位时正确使用它？

                      回答：
                      z-index 是 CSS 中用于控制元素在堆叠上下文中的层叠顺序的属性。数值越大，元素越靠前显示。
                      使用前提：
                      • 元素必须是定位元素，即 position 属性为 relative、absolute、fixed 或 sticky。
                      规则：
                      1. 层叠上下文（Stacking Context）：
                          • 当元素的 position 不为 static 且设置了 z-index，或者某些特定条件（如 opacity < 1），会创建一个新的层叠上下文。
                      1. 子元素的z-index：
                          • 子元素只能在自己的层叠上下文中进行层叠，无法超越父元素的层叠顺序。
                      示例：
                      注意事项：
                      • 避免滥用：过多的层叠上下文会增加复杂性，尽量简化。
                      • 调试工具：使用浏览器的开发者工具查看层叠顺序，辅助调试。

                      44. 解释一下 CSS 中overflow属性的作用，以及visible、hidden、scroll和auto的区别。

                      回答：
                      overflow 属性用于控制当元素内容超过其包含块的大小时的显示方式。
                      属性值：
                      1. visible（默认值）：
                          • 内容不会被裁剪，溢出的部分会正常显示，可能导致布局混乱。
                      1. hidden：
                          • 溢出的内容被裁剪，不会显示，不能滚动查看。
                      1. scroll：
                          • 溢出的内容被裁剪，且始终显示滚动条，无论是否需要滚动。
                      1. auto：
                          • 溢出的内容被裁剪，只有在需要时才显示滚动条。
                      应用示例：
                      注意：
                      • 滚动条的出现：scroll 会始终显示滚动条，而 auto 仅在内容超出时显示。
                      • 双轴控制：可以使用 overflow-x 和 overflow-y 分别控制水平和垂直方向。

                      45. 什么是语义化版本（Semantic Versioning），它在前端开发中有何意义？

                      回答：
                      语义化版本（Semantic Versioning，SemVer） 是一种版本命名规范，形式为 MAJOR.MINOR.PATCH，表示：
                      • MAJOR（主版本号）：出现不兼容的 API 修改。
                      • MINOR（次版本号）：添加了向下兼容的新功能。
                      • PATCH（补丁号）：做了向下兼容的问题修复。
                      示例：
                      • 1.0.0：初始发布。
                      • 1.1.0：添加新功能，向下兼容。
                      • 2.0.0：有破坏性更新，不兼容以前的版本。
                      意义：
                      • 依赖管理：帮助开发者正确地管理项目的依赖，避免因版本不兼容导致的问题。
                      • 团队协作：明确版本变化，方便团队成员了解更新内容。
                      • 发布策略：规范化版本发布流程，提升项目的稳定性和可维护性。
                      在前端开发中的应用：
                      • 包管理工具：如 npm、yarn 等，会根据语义化版本号管理依赖库。
                      • 版本控制策略：指导何时需要升级主版本，何时可以发布小版本更新。

                      46. 请解释一下 CSS 中的媒体查询中的逻辑操作符：only、not 和 and。

                      回答：
                      1. and：
                          • 用于组合多个媒体特性，只有当所有条件都成立时，样式才会生效。
                          示例：
                      1. not：
                          • 用于排除某个媒体类型或媒体特性，表示非指定条件的情况。
                          示例：
                      1. only：
                          • 用于隐藏对于不支持媒体查询的浏览器的样式，仅在支持媒体查询的浏览器中生效。
                          示例：
                      注意：
                      • 逻辑组合：可以通过 and、, 等组合复杂的媒体查询条件。
                      • 兼容性：only 常用于向后兼容旧浏览器，但现代浏览器已经普遍支持媒体查询。

                      47. 什么是 FOUC（闪烁的无样式内容），如何避免它？

                      回答：
                      FOUC（Flash of Unstyled Content） 是指在网页加载过程中，由于样式表加载延迟，导致页面暂时以未样式化的内容显示，随后才呈现正确样式的现象。
                      产生原因：
                      • 样式表加载或解析缓慢，浏览器先渲染了 HTML 内容。
                      • CSS 被放置在文档底部，或使用了 @import 导入样式，导致样式加载延迟。
                      解决方法：
                      1. 将 CSS 放在<head>中：
                          • 确保样式表在页面内容之前加载，防止内容先呈现。
                      1. 避免使用@import引入关键 CSS：
                          • 直接使用 <link> 标签，引入主要样式表，减少阻塞。
                      1. 最小化和合并 CSS 文件：
                          • 减少 HTTP 请求和文件大小，加快样式加载速度。
                      1. 使用内联 CSS（仅限关键样式）：
                          • 对于首屏关键样式，可以内联到 HTML 中，确保立即应用。
                      1. 服务器端渲染时延迟内容输出：
                          • 等待样式准备好后再输出内容，避免闪烁。

                      48. 如何实现 CSS 中的垂直文本？

                      回答：
                      可以通过 CSS 属性 writing-mode 来实现垂直文本排版。
                      示例：
                      属性解释：
                      • writing-mode：
                        • horizontal-tb（默认）：水平，从左到右。
                        • vertical-rl：垂直，从上到下，行从右到左。
                        • vertical-lr：垂直，从上到下，行从左到右。
                      • text-orientation：
                        • mixed（默认）：混合模式，西文字符横向，东亚字符竖向。
                        • upright：所有字符直立显示。
                        • sideways：所有字符旋转 90 度。
                      注意事项：
                      • 浏览器支持：现代浏览器支持较好，但需注意兼容性。
                      • 应用场景：适用于需要竖排文本的设计，如装饰性标题、传统东亚排版。

                      49. 什么是data-属性，如何在 HTML 和 CSS 中使用它？

                      回答：
                      data- 属性 是 HTML5 引入的自定义数据属性，允许在标准元素上存储额外的信息。
                      使用方法：
                      • 在 HTML 中定义：
                        • 在 JavaScript 中访问：
                          • 在 CSS 中使用（属性选择器）：
                            优势：
                            • 可扩展性：无需创建新的属性，可灵活存储数据。
                            • 语义清晰：data- 前缀表示这是开发者使用的自定义属性。
                            • 避免冲突：与标准属性分开，不会影响元素的默认行为。
                            应用场景：
                            • 存储组件状态：如 data-toggle、data-role。
                            • 传递数据给脚本：方便在前端脚本中获取元素相关的信息。

                            50. 请解释一下 CSS 中伪类:nth-child()和:nth-of-type()之间的区别，并举例说明。

                            回答：
                            • :nth-child(n)：
                              • 选择父元素的第 n 个子元素，不论元素类型。
                              • 语法：element:nth-child(n)
                            • :nth-of-type(n)：
                              • 选择父元素下特定类型的第 n 个子元素。
                              • 语法：element:nth-of-type(n)
                            区别：
                            • 选择范围：
                              • :nth-child() 基于所有子元素的顺序。
                              • :nth-of-type() 基于特定元素类型的顺序。
                            示例：
                            • 使用:nth-child(3) 选择的是第 3 个子元素，即 <p> 元素。
                            • 使用:nth-of-type(3) 选择的是第 3 个 <li> 元素，即“项目 3”。
                            应用示例：

                            51. 请解释什么是 BFC（块级格式化上下文），它的作用是什么？

                            回答：
                            块级格式化上下文（BFC） 是一种独立的渲染区域，只有块级盒子参与，具有创建新的布局上下文的特性。BFC 内部的元素布局不会影响到外部元素，反之亦然。
                            BFC 的特性：
                            1. 内部盒子按垂直方向排列：从顶部开始，一个接一个地垂直排列。
                            1. 盒子垂直方向的距离由 margin 决定：属于同一个 BFC 的两个相邻块级盒子的垂直间距会产生边距折叠。
                            1. BFC 区域不会与浮动元素重叠：这对解决浮动布局问题非常关键。
                            1. 计算 BFC 的高度时，浮动子元素也会参与计算：因此可以包含内部的浮动元素。
                            1. 独立的容器：在 BFC 内部，元素的布局不受外部的影响，同时也不影响外部元素。
                            创建 BFC 的方式：
                            • 设置 overflow 属性为非 visible 值：auto、hidden、scroll
                            • 设置 float 属性：left、right
                            • 设置 display 属性为 inline-block、table-cell、flex 等
                            • 设置 position 为 absolute 或 fixed
                            作用：
                            • 清除浮动：包含内部的浮动元素，防止浮动元素溢出其容器。
                            • 防止边距折叠：阻止相邻块级元素的垂直边距重叠。
                            • 自适应多栏布局：在同一行中放置多个块级盒子。
                            示例：清除浮动
                            Loading...

                            © Charlie Chan 2021-2025