真愚翁-CSDN博客

原创前端面试：元素竖向的百分比设定是相对于容器的高度吗?

例如，如果你希望一个子元素的高度为其父元素高度的50%，则父元素的高度必须是一个具体的值（如。总结来说，元素竖向的百分比设定确实是相对于其容器（包含块）的高度，因此在使用时需要确保包含块的高度已被明确设置。在使用Flexbox或Grid布局时，子元素的高度也可以通过百分比设置，但仍然依赖于其父元素的高度。是的，元素竖向的百分比设定是相对于其包含块（即容器）的高度。对于绝对定位的元素，百分比高度仍然是相对于其包含块的高度，但如果包含块的高度为。包含块是指一个元素的父元素或最近的定位元素（即设置了。

2024-09-07 09:15:00 224

原创前端面试：全屏滚动的原理是什么？用到了CSS的那些属性？

全屏滚动的基本原理是通过JavaScript监听滚动事件，并根据用户的滚动行为（如鼠标滚轮、触摸滑动等）来控制页面的滚动位置。每次滚动时，页面会平滑地滚动到下一个或上一个全屏的部分。全屏滚动是一种常见的网页交互效果，通常用于创建视觉上引人注目的单页应用或展示页面。根据用户的滚动方向，使用JavaScript控制页面滚动到下一个或上一个部分，通常使用。全屏滚动的实现依赖于JavaScript的事件监听和CSS的布局属性。使用JavaScript监听用户的滚动事件，判断用户的滚动方向（向上或向下）。

2024-09-07 09:15:00 301

原创前端面试：浏览器是怎样解析CSS选择器的？

通过以上步骤，浏览器能够高效地解析CSS选择器并应用样式，从而呈现出最终的网页效果。当多个选择器匹配同一个元素时，浏览器会根据CSS优先级规则（特指选择器的权重）来决定应用哪个样式。浏览器遍历DOM树中的每个节点，并将其与CSS规则树中的选择器进行匹配。浏览器解析CSS选择器的过程是一个复杂而高效的过程，涉及多个步骤。浏览器根据渲染树计算每个元素的几何信息（位置和大小），这个过程称为布局（或重排）。现代浏览器会进行各种优化，例如选择器的缓存、合并相同的样式规则等，以提高解析效率。内联样式（权重最高）

2024-09-06 09:15:00 181

原创前端面试：margin和padding分别适合什么场景使用？

都是用于控制元素间距的重要CSS属性，但它们的用途和适用场景有所不同。理解这两者的区别和适用场景，可以帮助前端开发者更有效地进行布局和设计，提高页面的可读性和用户体验。：当需要调整元素内部内容（如文本、图像等）与元素边框之间的距离时，使用。来控制元素内部的间距，适用于内容与边框之间的距离和视觉效果。是元素内部的空间，用于控制元素内容与其边框之间的距离。是元素外部的空间，用于控制元素与其他元素之间的距离。可以帮助清除浮动元素的影响，确保其他元素的布局正常。来控制元素之间的外部间距，适用于元素间的距离和对齐。

2024-09-06 09:15:00 175

原创前端面试：对BFC规范(块级格式化上下文：block formatting context)的理解

理解BFC对于前端开发非常重要，因为它影响元素的布局和定位。：BFC是一个HTML文档中的部分区域，内部的元素在该区域内独立于外部元素进行布局。：BFC内的元素不会影响外部元素的布局，反之亦然。这意味着BFC内的浮动元素不会影响外部元素的高度。通过将父元素设置为BFC，可以确保其包含所有子元素的高度。：在使用浮动布局时，BFC可以帮助清除浮动带来的问题，确保父元素的高度正确。：BFC内的元素的垂直外边距不会与外部元素的外边距重叠，这有助于控制布局。：在复杂布局中，使用BFC可以更好地控制元素的排列和间距。

2024-09-05 09:00:00 200

原创前端面试：CSS优化、提高性能的方法有哪些？

在前端开发中，CSS优化和提高性能是确保网页快速加载和流畅运行的重要环节。使用Sass、Less等预处理器，可以更好地组织和管理CSS代码，减少冗余，提高可维护性。使用CSS Grid和Flexbox等现代布局方式，减少对浮动和定位的依赖，简化布局代码。使用简洁的选择器，避免过于复杂的选择器链，以提高选择器的匹配速度。尽量减少DOM操作，合并多次操作为一次，避免频繁的重绘和重排。设置适当的缓存策略，利用浏览器缓存CSS文件，减少重复加载。通过以上方法，可以有效优化CSS，提高网页性能，提升用户体验。

2024-09-05 09:00:00 224

原创前端面试：li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

元素通常会有浏览器默认的内边距（padding）和外边距（margin），这可能导致它们之间出现空白。），在HTML代码中，行内元素之间的空白（如空格、换行符）会被渲染为实际的空白。元素之间的看不见的空白间隔问题。选择合适的方法取决于具体的布局需求和设计。行高（line-height）设置可能会影响元素之间的间距，尤其是在使用。通过以上方法，可以有效地解决。

2024-09-04 09:00:00 199

原创前端面试：CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

是一个特定于表格元素的属性值，用于隐藏元素并移除其占用的空间。虽然在现代浏览器中表现良好，但在旧版IE中可能存在兼容性问题，因此在使用时需要考虑目标用户的浏览器环境。：对于需要兼容旧版IE的项目，可以使用条件注释或特定的CSS Hacks来为不同的浏览器提供不同的样式。当应用于表格行或单元格时，它会使该行或单元格在视觉上消失，并且会从表格的布局中移除，类似于。可能不会如预期那样工作，尤其是在非表格元素上使用时，可能会导致意外的布局问题。在表格元素上表现一致，能够正确地隐藏行或单元格并移除其占用的空间。

2024-09-04 09:00:00 185

原创前端面试：介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

在低版本IE中，元素的宽度和高度包括内容、内边距和边框，而不单单只是内容区域。这意味着设置宽度时，边框和内边距会被算入总宽度中，导致一些开发者在布局时感到困惑。标准的CSS盒子模型是用来描述元素在网页中占用空间的方式。：元素与其他元素之间的外围空白，外边距也是透明的，背景颜色不会受到外边距的影响。宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框。高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框。：围绕内容和内边距的边框，边框可以有不同的样式、宽度和颜色。

2024-09-03 09:15:00 168

原创前端面试：经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

同时，保持对新技术的关注和学习，能够帮助开发者更好地应对未来的兼容性挑战。使用Modernizr等库进行特性检测，根据浏览器支持情况加载不同的脚本或样式。：不同浏览器对JavaScript的实现和支持不同，尤其是ES6及以上的特性。：使用HTML5 Shiv或Respond.js等库来为旧版浏览器提供支持。在支持CSS变量的浏览器中使用变量，在不支持的浏览器中提供后备样式。：不同浏览器对盒子模型、浮动、定位等布局方式的处理不同。：不同浏览器对CSS属性的支持程度不同，尤其是新特性。）来支持不同浏览器。

2024-09-03 09:00:00 342

原创前端面试资料集合

内容包括JavaScript、CSS、HTML及框架知识，书中同时提供了大量的笔试题和面试题解析，帮助读者掌握扎实的技术基础并在面试中脱颖而出。课程涵盖常用的数据结构（如数组、链表、堆、树等）和算法（排序、查找、递归等），通过理论讲解和实际编程练习，帮助学员深入理解和掌握这些重要的计算机科学基础知识。通过对题目的详细解析，学员可以掌握Web技术的核心概念以及面试中可能遇到的实际问题，帮助他们在面试中表现得更为出色。27、说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

2024-09-02 09:15:00 3231

原创前端面试：title与h1的区别、b与strong的区别、i与em的区别？

在前端开发中，理解 HTML 标签的区别和语义非常重要，以便更好地组织内容和优化搜索引擎优化（SEO）。：用于强调文本，通常会以斜体显示，但也具有语义上的重要性，表示该部分文本在内容中是有重要性的。：不仅加粗文本，还赋予其重要性或强调意义，通常用于表示强烈的情感或注意事项。：定义文档的标题，通常在浏览器标签页显示，搜索引擎结果页面中也使用该标题。：表示页面的主标题，通常用于内容的开始部分，SEO中被认为是最重要的标题。：用于斜体化文本，没有传达语义的目的，主要用于视觉效果。：用于加粗文本，但没有语义强调。

2024-09-02 09:00:00 313

原创前端面试：页面可见性（Page Visibility API）可以有哪些用途？

例如，当用户不在页面时，可以暂停通知或弹出窗口，避免干扰。在用户切换到其他标签页时，可以延迟加载某些高带宽资源（如图片、视频等），以避免在用户不关注页面时占用带宽。当页面不在视口中时，某些性能密集型操作（如复杂的计算和图像处理）可以被推迟，避免浪费资源。对于实时更新的应用（如聊天应用），可以在页面不可见时降低更新频率，减少不必要的网络请求。在多媒体应用中，可以控制媒体的播放状态，使其在页面隐藏时自动暂停，以改善用户体验。对于需要展示广告的页面，可以在页面不可见时暂停广告的展示，以避免浪费广告曝光。

2024-09-01 10:00:00 305

原创前端面试：如何在页面上实现一个圆形的可点击区域？

实现一个圆形的可点击区域可以通过多种方法，常见的包括使用 CSS 和 HTML 创建一个按钮或链接，并利用 border-radius 属性来实现圆形效果。以上几种方法中，你可以根据具体的需求选择合适的方式来实现圆形的可点击区域。还是 SVG，都能达到相应的效果，并通过 CSS 来控制样式和交互效果。元素，并通过 CSS 来设置其宽高和边框半径，使其呈现圆形效果。元素并通过 CSS 设置样式来达到圆形效果。如果需要一个更加复杂的形状，使用 SVG 也是一个不错的选择。元素本身包含了可点击的语义。

2024-09-01 10:00:00 140

原创前端面试：如何实现浏览器内多个标签页之间的通信?

如果需要在多个标签页之间快速、实时地进行较大量的数据传输，WebSockets 是一个好方法。方法可在同源和跨源的窗口之间传递消息，但这种方式通常用于不同的窗口或不同的域之间的通信，而不仅仅是在多个标签页之间。在多个浏览器标签页之间实现通信的方式有多种，具体选择哪一种方法取决于应用的需求与复杂性。在前端开发中，浏览器内多个标签页之间的通信可以通过几种不同的方式实现。API 提供了一种更直接的方式来在同源的多个窗口或标签页之间进行通信。是一个跨标签页的存储，可以在多个标签页之间实现简单的通信。

2024-08-31 10:00:00 431

原创前端面试：webSocket如何兼容低浏览器？

之后，客户端会立即发起新的请求。很多现代的前端框架（如 React、Angular、Vue）与 Socket.io 等库集成良好，Socket.io 封装了 WebSocket 功能，并提供了对于不支持 WebSocket 的浏览器如低版本 IE 的支持。在处理低版本浏览器对 WebSocket 的支持时，使用 polyfill（如 SockJS）或采用长轮询策略是比较常见的解决方案。Socket.io 会自动选择最适合的传输方式，包括 WebSocket、轮询等，确保在各种环境下的兼容性。

2024-08-31 10:00:00 679

原创前端面试：请描述一下 cookies，sessionStorage 和 localStorage 的区别？

对于需要在多个会话中持久化的数据，可以使用 localStorage，对于临时数据则可以使用 sessionStorage，而 Cookies 则适合于需要与服务器进行通信的场景。Cookies、sessionStorage 和 localStorage 是 Web 存储的三种方式，它们在存储数据的结构、生命周期、容量和使用场景等方面存在一些显著的区别。：localStorage 是持久化存储，数据存储在用户的浏览器中，不会随会话结束而删除。：适合存储会话期间的临时数据，不会在关闭浏览器后持久化。

2024-08-30 10:00:00 295

原创前端面试：iframe有那些缺点？

通过 JavaScript 与其他域中的内容进行交互时，可能遇到同源策略的限制，无法轻松实现数据共享或通信。中，样式和行为可能会受到外部页面的影响，导致一致性问题。内的内容不一定被视为主页面的一部分，从搜索引擎的角度来看，相应内容的价值可能会降低。：嵌入外部内容时，外部内容的版本更新可能会影响到主页面的功能和样式，需要额外的维护。中的内容可能难以调试，尤其是在嵌套多个层次的时候，可能会使问题定位变得更加复杂。：嵌套的内容可能会产生不必要的滚动条，影响用户体验，尤其是在小屏幕设备上。会增加页面的渲染时间。

2024-08-30 10:00:00 408

原创前端面试：HTML5的离线储存怎么使用，工作原理能不能解释一下？

IndexedDB 是一个异步的、基于事务的数据库，支持存储大量数据（远超 localStorage）和结构化数据，适用于需要为每条数据分配唯一标识符（主键）的场景。应用程序可以通过 JavaScript 进行增、删、改、查操作，所有操作都是以事务的形式进行，保证数据的完整性和一致性。：适合存储大型且复杂的数据，具备更强的查询能力和灵活性，适合更高级的离线应用和需要高级功能的场景。：适合存储较小规模的简单数据，易于使用和访问，适合简单的离线应用或缓存。对象来存储数据，数据在用户关闭浏览器后仍然保持。

2024-08-29 10:00:00 157

原创前端面试：浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

浏览器通过 Service Worker 和 Cache API 管理和加载离线存储资源，支持应用在网络不稳定或离线时的使用。在进行离线存储时，开发者需要根据应用需求选择合适的技术，并合理地组织资源的缓存与数据的管理，以提升用户体验和应用性能。IndexedDB 是一种更强大的数据库管理系统，支持存储复杂的数据结构（如对象）和大数据量，适合用于缓存更复杂的应用数据。Service Worker 是一种在浏览器背景中运行的脚本，允许开发者拦截网络请求并处理它们，包括缓存资源以便离线访问。

2024-08-29 10:00:00 384

原创前端面试：行内元素有哪些？块级元素有哪些？空(void)元素有那些？

了解这些元素的分类对于创建语义清晰、结构合理的网页是非常重要的。空元素是指没有结束标签的元素，通常用于插入某些内容而不需要显式的关闭标签。行内元素的特性是它们不会在前后产生换行，并且通常只占据自己的内容宽度。块级元素的特性是它们会在前后产生换行，并且通常占据父元素的整个宽度。：将文本斜体显示，但不具有强调的语义。：将文本加粗，但不具有强调的语义。：和主要内容无关的内容，如边栏。：强调文本，通常显示为加粗。：强调文本，通常显示为斜体。：用于文本的样式化或分组。：水平线，表示主题的分隔。：表示代码或代码片段。

2024-08-28 10:00:00 374

2401_86900447的博客