重绘和回流和重排（重绘回流重排）

块元素（block-level elements）是那些默认会占据父元素全部宽度，并独占一行的元素。它们通常用于布局和结构化内容，例如段落、标题、列表等。以下是常见的块元素：

：通用的容器元素，常用于页面布局。
：段落元素。
- ：标题元素，分别表示不同级别的标题（从大到小）。
、、：无序列表、有序列表和列表项。
、：页面或区块的页眉和页脚。
：用于定义文档中的某个区域或节。
：定义独立的文章或内容块。
：定义导航链接的区域。
：表示侧边栏内容，通常是与主内容相关的附加内容。
：文档主体内容，包含页面的主要内容。
：表单元素，用于用户输入。
：长引用块。
、、、、：表格及其相关元素。
、：用于包含图像、图表、图示等，并提供可选的标题说明。
：水平分割线，表示主题的分隔。
：地址信息块。

这些块元素可以包含内联元素或其他块元素（除特殊情况如不能包含块元素），它们在布局时总是从新的一行开始，并独占一行。

行内元素（inline elements）是那些只占据其内容的宽度，并与其他元素在同一行显示HTML 元素。行内元素通常用于修饰文本或小范围的内容，而不会在文档中形成独立的块区域。以下是常见的行内元素：

：通用行内容器，用于为部分文本应用样式。
：超链接，用于创建链接。
：表示重要性，通常浏览器会以粗体显示。
：表示强调，通常浏览器会以斜体显示。
：粗体文本。
：斜体文本。
：下划线文本。
：使文本小一号。
：高亮文本，通常表示重要部分。
：表示缩写，可以提供完整的描述。
：用于显示计算机代码片段。
：图片元素，用于嵌入图像。
：换行符，用于在文本中插入换行。
、：下标和上标文本。
：按钮元素。
：表单元素的标签。
：表单输入控件。
、：下拉选择列表及其选项。
：文本区域，用于输入多行文本。

行内元素可以放在块元素内，但不能包含块元素（除非使用 HTML5 中的一些新特性，例如可以包含块元素）。它们不会独占一行，多个行内元素会在同一行中按顺序排列。

CSS 属性的应用

块元素：
- 可以设置诸如、、、等属性来控制元素的大小和边距。
行内元素：
- 行内元素不能设置和（这些属性对行内元素没有效果），但可以使用和来调整内容的间距。不过仅适用于水平方向，垂直方向通常不起作用。

CSS 中有四种主要的定位方式，用于控制 HTML 元素在页面中的位置。

静态定位（static）：所有 HTML 元素的默认位置即为静态定位；静态定位不会受到、、、的影响；元素在页面中按其正常的文档流位置排列。

相对定位（relative）：元素相对于其原始位置进行偏移。可以使用、、、来设置相对于自身位置的移动量。原位置仍占据文档流中的空间，因此相对定位后的元素会在原来位置的基础上移动，但它原来的空间仍然被保留。

绝对定位（absolute）：相对于它的最近的已定位祖先元素来定位。如果找不到任何已定位的祖先元素，那么它会相对于初始包含块（通常是浏览器窗口）来定位；元素会从文档流中移除，因此不会占据空间，相邻元素会占用它原来位置；绝对定位可以使用、、、来指定元素的位置。

固定定位（fixed）：元素相对于 浏览器窗口 进行定位；无论页面如何滚动，固定定位的元素始终保持相对于浏览器窗口的固定位置；这种定位通常用于页面的固定导航栏、悬浮框等场景。

粘性定位（sticky）：元素在 普通文档流中，但是会在特定的滚动位置上切换为相对定位和固定定位之间的状态；粘性定位元素相对于其最近的滚动祖先元素生效，通常用于制作滚动到特定位置时固定的导航栏；、等属性设置粘性元素在何时保持固定的效果。

Flex布局（弹性盒布局，Flexible Box Layout）是一种 CSS 布局模式，专门为适应页面上不同屏幕尺寸和动态内容分布而设计。它是布局中常用的工具，能够方便地管理页面元素的排列、对齐和分布。Flex 布局主要通过设置容器（父元素）和子项（子元素）属性来实现。

Flex 容器和子项
容器：需要设置的元素是父元素，这样它内部的子项就会成为 Flex 布局的项目。
子项：容器内的所有直接子元素会自动变成 flex 项目。
主轴和交叉轴
主轴：Flex 布局的一个特点是可以通过来指定主轴的方向，子项会沿主轴排列。
交叉轴：与主轴垂直的方向是交叉轴，子项在交叉轴上可以通过对齐属性进行管理。
Flex 容器的属性
：设置主轴的方向，决定项目的排列方式。
：沿主轴对齐项目，用于控制子项在主轴上的对齐方式。
：沿交叉轴对齐项目，用于控制子项在交叉轴上的对齐方式
：设置子项是否换行。

JavaScript 中的数据类型可以分为两类：原始类型和引用类型。

1. 原始类型（Primitive Types）

原始类型是 JavaScript 中最基本的数据类型，值是不可变的。在内存中，这些类型直接存储在栈内存中。原始类型有Number，String，Boolean，Undefined，Null，Symbol（符号类型，ES6 引入），BigInt（大整数，ES11 引入）

2. 引用类型（Reference Types）

引用类型是可以存储多个值的对象，通常被称为 对象类型。引用类型的值存储在堆内存中，变量存储的是指向内存地址的引用，而不是实际的值。引用类型有：Object（对象类型），Array（数组），Function（函数），Date（日期），RegExp（正则表达式），Map、Set、WeakMap、WeakSet（后两个类似于 Map 和 Set，但其键只能是对象，并且是弱引用）

3.类型检测

使用可以检测原始类型：返回，返回（这是一个 JavaScript 的历史遗留问题）。
对于引用类型，可以使用或来检测。

4. 赋值方式的区别

原始类型的赋值是按值传递的，拷贝的是值的本身。
引用类型的赋值是按引用传递的，拷贝的是对象在堆内存中的引用地址。

数据的拷贝主要分为浅拷贝和深拷贝

1. 浅拷贝

浅拷贝只复制对象的第一层属性，如果对象的某些属性是引用类型（比如数组、对象），那么浅拷贝只复制引用地址，拷贝后的新对象和原对象指向同一个内存位置。

原始类型的浅拷贝：直接复制值，互不影响。
引用类型的浅拷贝：仅复制引用地址，两者指向同一对象，修改其中一个会影响到另一个。

常见的浅拷贝方法：

；

2.深拷贝

深拷贝则是对对象中的所有嵌套属性进行递归复制，新的对象和原对象完全独立，互不影响，无论属性是原始类型还是引用类型。

原始类型的深拷贝：直接复制值。
引用类型的深拷贝：递归复制所有层级的对象。

常见的深拷贝方法：

递归遍历：可以通过递归遍历所有的属性来创建一个新的对象，但这种方式对于循环引用会造成无限递归的问题。
：这种方法是最简单的深拷贝方式，但它有一些局限性，如无法处理函数、、循环引用等
库中的：是一个流行的 JavaScript 工具库，其中的方法可以方便地实现深拷贝。

输入框（如 HTML 中的元素）常用的事件主要包括用户交互的各种操作事件，以下是一些常见的输入框事件及其说明：

事件：

在输入框的值发生变化时触发，无论是通过用户键入、粘贴内容、或者通过 JavaScript 代码修改输入框的值。
常用于监听实时的输入变化，例如搜索框实时显示匹配结果。

事件：

当输入框的值发生变化并且失去焦点时触发。
常用于在用户完成输入并点击其他位置后进行数据的验证或处理。

事件：

当输入框获得焦点时触发。
常用于在输入框被选中时执行某些动作，例如显示提示信息或改变样式。

事件：

当输入框失去焦点时触发。
常用于在用户离开输入框后对输入内容进行校验。

事件：

当用户在输入框中按下键盘上的键时触发。
可以用于捕获按键，例如实现快捷键功能或禁止某些特定字符输入。

事件：

当用户在输入框中释放键盘上的键时触发。
通常用于在用户输入字符后立即获取输入的内容进行操作。

事件：

在用户按下键盘上的键时触发，但不会像一样捕获所有按键（例如功能键）。
常用于监听字符输入。

可以使用对象来获取当前页面的地址。提供了与浏览器当前页面 URL 相关的信息和功能。

属性

：返回当前页面的完整 URL，例如。
：返回当前页面的域名，例如。
：返回当前页面的路径部分，例如。
：返回 URL 中的查询字符串部分，例如。
：返回 URL 中的哈希部分，例如。

这些属性可以帮助你在不同的场景下灵活获取页面 URL 的各个部分。

1.在 JavaScript 中，可以使用方法来打开一个新的网页，通常用于在新窗口或新标签页中进行跳转。

2.在 HTML 中，通过在链接标签中使用属性，可以让用户在新标签页中打开目标链接。

3.如果你想要通过提交表单在新窗口或新标签页中显示表单结果，可以在标签上使用属性。

4.虽然本身是用来在当前窗口跳转的，但你可以结合 HTML 和 JavaScript 来通过事件控制跳转行为。例如，在点击按钮时通过 JavaScript 实现新标签页的跳转。

1.数组转换为字符串的方法：

方法可以将数组转换为一个以逗号分隔的字符串；

方法可以将数组的元素连接成一个字符串，并且允许自定义分隔符。

方法可以将数组转换成 JSON 格式的字符串，保留数组的方括号和内容格式。

可以使用循环或其他遍历方法（例如）来手动将数组转换为字符串。

2.字符串转换成数组的方法：

方法可以将字符串按照指定的分隔符拆分成数组；

方法可以将类似数组的对象或者可迭代对象（如字符串）转换为数组；

使用扩展运算符（...）可以将字符串的每个字符扩展为数组中的一个元素。

可以结合正则表达式的适用于需要更复杂的拆分逻辑的场景。

1. 方法用于合并两个或多个数组，它不会修改原始数组，而是返回一个新数组

2.扩展运算符可以用于将数组的元素展开，以合并多个数组，非常简洁直观。

3. 使用通过方法将一个数组的元素追加到另一个数组中，直接修改第一个数组。

4.可以用方法和扩展运算符结合，直接向数组添加多个元素

1. 使用方法可以将一个或多个源对象的属性复制到目标对象中，并返回目标对象。

2.使用扩展运算符 ()

3.手动遍历对象的属性进行合并

使用 (lodash 库)可以处理嵌套对象的合并，而不仅仅是浅层的属性。

1. HTML 文件上传表单

用于选择文件。
表示表单的编码类型为多部分表单数据，这在文件上传中是必须的。

2. 使用原生 JavaScript 和

对象用于包装文件数据，便于发送。
发送请求，中传递。

3.使用 Axios 实现文件上传

Axios 是常用的 HTTP 请求库，也可以用于文件上传。

使用为发送文件数据。

在 JavaScript 中，、和方法都是用于改变函数执行上下文（即值）的常用方法。它们的主要用途是动态地绑定函数的，从而能够控制函数如何调用和作用的对象。

方法：

用法：
功能：直接调用函数并改变指向。
参数：
- ：函数内部的指向的对象。
- ：函数需要的参数，逐个传递。

方法：

用法：
功能：直接调用函数并改变指向，和类似，但是参数必须以数组的形式传递。
参数：
- ：函数内部的指向的对象。
- ：以数组形式传递的参数列表。

方法

用法：
功能：不会立即调用函数，而是返回一个新的函数，并且永远绑定到指定的对象上。你可以稍后调用这个新的函数。
参数：
- ：函数内部的指向的对象。
- ：这些参数会作为新函数的默认参数（如果传递）。

区别总结

和都是立即调用函数并改变指向的。
- 逐个传递参数。
- 以数组形式传递参数。
则不会立即调用，而是返回一个绑定了的新函数，方便稍后调用。

在 JavaScript 中，关键字的行为取决于它所在的上下文或调用方式。在函数中，的指向有很大的不同，这取决于函数的定义和调用的方式。以下是常见的情况：

1. 普通函数中的

在普通函数中，的值取决于函数的调用方式：

在 全局作用域 或作为 普通函数调用 时，通常指向 全局对象（浏览器环境下是，严格模式下是）。
在 严格模式 () 下，普通函数调用中的为。

2. 方法调用时的

当函数作为对象的方法调用时，指向调用该方法的对象。

3. 构造函数中的

构造函数是通过关键字调用的。在构造函数中，指向新创建的对象。

4. 箭头函数中的

箭头函数中的是词法作用域绑定的，也就是说它会继承自定义箭头函数时的外层，而不是基于调用方式。

5. 事件处理函数中的

在 DOM 事件处理函数中，通常指向触发事件的 DOM 元素。

6. 显式绑定 (, , )

可以使用、或来显式地设置的值。

总结

普通函数：的值取决于调用函数的方式，通常是全局对象，严格模式下是。
对象方法：指向调用该方法的对象。
构造函数：指向新创建的对象。
箭头函数：由定义时的作用域决定，不随调用方式改变。
事件处理函数：指向触发事件的 DOM 元素。
显式绑定：可以使用、、显式设置。

计算属性 ()

计算属性是一种基于已有的数据，进行复杂计算并返回结果的方式，常用于模板中需要显示的数据。计算属性的特点是基于依赖缓存，即只有在依赖的数据发生变化时，计算属性才会重新计算，否则会从缓存中读取。这使得计算属性在处理开销较大的计算时非常高效。

特点：

基于依赖缓存：计算属性的值会被缓存，只有当依赖的值发生改变时，才会重新计算。
简洁性：它适合用于模板中涉及复杂逻辑的属性计算，代码结构更加简洁。
读取方式类似于普通属性：它的用法与普通属性一致，但实现的是基于其他属性的动态计算。

监听器 ()

监听器是一种观察数据变化并执行指定逻辑的方式，常用于处理数据变化时执行异步操作，例如 API 请求、手动的数据深度修改等。与计算属性不同，更类似于回调函数，监视某个数据的变化，并执行特定的逻辑。

特点：

监听特定数据变化：可以监听到某个属性的变化，并对变化进行处理。
适用于异步或较复杂逻辑的场景：例如，当某个数据变化时需要调用 API、处理本地存储等。
可以监听嵌套对象：通过设置可以监听对象中的深层次变化。

是 Vue 中实现双向数据绑定的指令，主要用于在表单元素（如、、等）上实现用户输入与应用状态之间的自动同步。

的工作原理可以总结为两部分：

绑定值（Value Binding）：
- 当你使用在表单元素上时，Vue 会自动将表单的与 Vue 实例的数据属性绑定。
- Vue 通过属性将数据的初始值绑定到表单中，确保输入框显示的数据和 Vue 实例中的数据同步。
监听输入事件（Event Listening）：
- 会自动在元素上监听用户的输入事件（如、等事件）。一旦用户在输入框中改变了内容，会通过事件监听将新值更新回 Vue 的数据属性中。
- 例如，对元素来说，监听的是事件；对元素来说，监听的是事件。

是 Vue 中用于识别虚拟节点的特殊属性，通常用于循环列表（）或动态组件切换的场景中。它的作用有以下几点：

唯一标识 VNode：
- 的主要作用是给每一个虚拟节点赋予一个唯一的标识，从而使 Vue 可以更高效地追踪和更新节点。
- 在列表渲染（）中，帮助 Vue 准确判断节点的顺序和关联性，这样在渲染更新时，Vue 不会误操作。
提高渲染性能：
- 当使用渲染一个列表时，如果每个元素都有一个唯一的，Vue 就能在 DOM 中正确地对节点进行复用和移动。
- 如果没有，Vue 可能会复用错误的节点，导致无法预期的渲染结果，特别是当列表元素数量发生改变时。
解决同类型节点的重新渲染问题：
- 还用于处理同一层级的动态组件。例如，两个组件在同一个位置动态切换时，可以保证组件重新创建，而不是复用以前的组件

复用错误：当使用的是数组的索引，Vue 在更新列表时无法正确追踪元素的真实变化。当数组项发生重新排序、添加、删除时，可能会改变，Vue 会错误地复用之前的 DOM 节点，导致渲染出现不一致的情况。
状态保留问题：如果组件在循环中有状态，例如输入框中的文本或其他内部状态，用作为会使 Vue 无法正确区分每一个组件的实例，可能导致组件的状态在列表更新时被错误复用。例如，在表单输入中，如果使用索引作为，输入内容可能会错位。
性能问题：正确的应该帮助 Vue 识别哪些节点发生变化、哪些可以复用。当作为时，Vue 可能会重用错误的元素，增加不必要的 DOM 操作，从而影响性能。

1.引入 Vue Router这个库

2.创建路由文件

3.将 Router 注入到 Vue 实例中

4.可以使用和组件来实现路由导航和展示。

用于创建导航链接。类似于传统 HTML 中的标签，但是它能够与 Vue Router 一起工作，实现单页应用的无刷新跳转。

用于占位，显示匹配的组件。当导航到某个路径时，会展示对应的组件内容。

到此这篇重绘和回流和重排（重绘回流重排）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：字体图标库制作（字体图标的用法）

下一篇： samba共享配置（samba共享文件）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/15573.html