1.块元素，行内元素，行内块元素什么区别？
用于描述HTML元素在页面布局中显示的三种不同布局。
*块元素独占一行，可以设置宽高；行内元素与其他行内元素在同一行显示，不能直接设置宽高；行内块元素结合了二者的特点，可以设置宽高且与其他行内元素在同一行显示。*
块元素(Block-level elements)
* 块元素会独占一行，在新的一行开始显示
* 可以设置宽度(width)以及高度(height)
* 包括：`<div>` `<p>` `<h1>到<h6>` `<ul>` `<ol>` `<li>` `<table>`等
* 默认情况下，块元素的宽度为其父元素的100%
### 行内元素(lnline elements)
* 行内元素不会独占一行，与其他行内元素在同一行显示，如果宽度不足以容纳则换行显示
* 不能直接设置宽度(width)和高度(height)，尺寸由内容决定
* 包括：`<span>` `<a>` `<img>` `<b>` `<i>` `<u>` `<em>` `<strong>`等
* 可以设置水平边距(margin-left & margin-right)和垂直边距(margin-top & margin-bottom)，垂直边距不会影响其他行内元素的位置
行内块元素(lnline-block elements):
* 不会独占一行可以与其他行内块/行内元素在同一行显示
* 行内块元素可以设置宽度(width)和高度(height)
* 可以设置水平边距(margin-left & margin-right)和垂直边距(margin-top & margin-bottom)，垂直边距会影响其他行内块元素的位置
* 可以解决某些页面布局问题，例如：在一行内显示多个具有不同宽度的元素
* 将元素设置为行内块元素，通过CSS属性：`display: inline-block`
2.localstorage，sessionstorage和cookie的区别？
`localStorage`、`sessionStorage` 和 `Cookie` 都是用于在客户端存储数据的技术
*`localStorage` 和 `sessionStorage` 主要用于在客户端临时存储大量数据，而 `Cookie` 可用于在客户端和服务器之间传递少量数据，并进行用户识别等操作。在选择存储方案时，需要根据实际需求和使用场景来决定使用哪种技术。*
存储期限：
* `localStorage`：数据可以永久存储在客户端，直到用户主动删除或通过JavaScript代码删除。
* `sessionStorage`：数据仅在当前浏览器会话期间有效，当页面会话结束（例如关闭浏览器标签页或窗口）时，数据会被清除。
* `Cookie`：数据存储期限取决于设置的过期时间（`expires` 属性）。在过期时间之前，数据会一直保留在客户端；一旦过期，数据将被删除。如果没有设置过期时间，`Cookie` 会话级别的，关闭浏览器标签页或窗口后失效。
存储空间：
* `localStorage` 和 `sessionStorage`：不同浏览器对存储空间大小的限制不同，通常为5MB左右。
* `Cookie`：单个 `Cookie` 大小限制为4KB（不同浏览器可能略有差异），每个域名下最多可存储的 `Cookie` 数量也有限制（通常为20个左右）。
### 数据共享：
* `localStorage` 和 `sessionStorage`：数据仅在当前浏览器窗口或标签页中可用，不同窗口或标签页之间的数据是隔离的。
* `Cookie`：数据可以在同一域名下的不同窗口或标签页之间共享。如果设置了 `Cookie` 的 `domain` 属性，数据还可以在不同子域名间共享。
安全性：
* `localStorage` 和 `sessionStorage`：数据容易受到跨站脚本攻击（XSS）的影响，攻击者可以通过脚本窃取或篡改数据。
* `Cookie`：可以设置 `Secure` 属性以仅在HTTPS连接下传输数据，降低被截获的风险。还可以设置 `HttpOnly` 属性，使 `Cookie` 不能通过JavaScript访问，进一步降低XSS攻击的风险。
与服务器交互：
* `localStorage` 和 `sessionStorage`：数据仅存储在客户端，不会随HTTP请求发送到服务器。
* `Cookie`：数据会随每个HTTP请求发送到服务器，服务器可以根据 `Cookie` 进行用户识别、会话管理等操作。
3.SEO优化是什么？
SEO优化，即搜索引擎优化，是一种通过优化网站内容和结构，使其更符合搜索引擎排名算法，从而提高网站在搜索引擎结果页面(SERP)中的自然排名的技术手段。简单来说，SEO的目标就是让更多的人在搜索相关关键词时，能够更容易地找到你的网站。
SEO优化的核心组成部分
* 站内优化：包括内容优化、关键词布局、网站结构调整、代码优化等。
* 站外优化：通过外部手段提升网站权重，如外链建设、社交媒体推广等。
SEO优化的实践方法
* 关键词研究和选择：使用关键词研究工具，分析竞争对手，关注用户意图。
* 内容优化：关键词合理布局，撰写高质量内容，保持内容更新。
* 技术优化：提升网站速度，移动端优化，确保网站安全，优化网站结构。
* 外部链接建设：发布高质量内容，进行内容推广，参与行业活动。
* 监测和分析：使用分析工具监测网站数据，定期审查网站，调整优化策略。
SEO优化的重要性
SEO优化的目的是提高网站的可见性，增加有质量的流量，从而最终提升业务的转化率。一个成功的SEO策略通常需要站内优化和站外优化的共同努力，以确保网站能够在搜索引擎中获得良好的排名。
4.link和@import的用法和区别：
*尽管 `link` 和 `@import` 都可以用于引入外部CSS文件，但在实际应用中，推荐使用 `link` 标签，因为它具有更好的性能、兼容性和灵活性。*
link 用法
`link` 主要用于在HTML文档的`<head>`部分引入外部CSS文件。基本语法如下：
```html
<link rel="stylesheet" href="styles.css">
```
* `rel="stylesheet"` 表示链接的关系类型为样式表。
* `href="styles.css"` 指定外部CSS文件的路径。
@import 用法
`@import` 用于在CSS文件中引入另一个CSS文件。基本语法如下：
```css
@import url("styles.css");
/* 或者 */
@import "styles.css";
```
* `url("styles.css")` 或直接 `"styles.css"` 指定要引入的外部CSS文件的路径。
link 和 @import 的区别
1. **引入方式**：`link` 是在HTML文档中使用标签引入外部CSS文件，而 `@import` 是在CSS文件中使用语句引入另一个CSS文件。
2. **加载顺序**：`link` 标签按照它们在HTML文档中出现的顺序加载CSS文件，而使用 `@import` 导入的CSS文件可能会在其他内容之后加载，这可能导致页面渲染时的闪烁现象。
3. **性能**：由于 `@import` 可能导致额外的HTTP请求和延迟加载，因此使用 `link` 标签通常具有更好的性能。
4. **浏览器兼容性**：`@import` 在较旧的浏览器（如IE4和IE5）中具有较好的兼容性，而 `link` 标签在所有现代浏览器中都得到了支持。
5. **元数据**：`link` 标签可以包含更多的元数据，例如 `title`、`media` 和 `charset` 等属性，这使得它具有更丰富的功能。
6. **可访问性**：`link` 标签通常被认为在可访问性方面具有优势，因为它允许搜索引擎和其他辅助技术更好地理解链接的目的。
7. **动态样式切换**：通过JavaScript操作DOM，可以动态地添加或移除 `link` 标签来切换不同的样式表，而使用 `@import` 则需要重新加载整个CSS文件。
5.讲讲flex布局
Flex布局（Flexible Box Layout），也称为Flexbox（弹性盒布局），旨在提供一种简单而灵活的方式来构建现代网页布局。它的目标是解决传统布局方式在构建复杂布局时的限制和不足，特别是在响应式设计中的应用。
Flex布局的基本原理
Flex布局通过给父容器添加 `display: flex`属性，使得子元素能够灵活地排列和对齐。它涉及到两根轴线：主轴和交叉轴。主轴是Flex容器的主要方向，可以是水平或垂直，由 `flex-direction`属性定义。交叉轴垂直于主轴，由 `justify-content`和 `align-items`属性控制子元素在主轴和交叉轴上的对齐方式。
Flex布局的优势
- **强大的自适应能力**：Flex布局能够自动调整子元素的大小以适应容器的大小，实现响应式设计。
- **灵活性高**：通过简单的属性设置，可以实现多种布局效果，如水平居中、垂直居中、等高列布局等。
- **易于上手**：相比于其他布局方式，Flex布局的规则更直观，更容易实现复杂的布局需求。
### Flex布局的缺点
- **浏览器兼容性**：虽然大多数现代浏览器都支持Flex布局，但在一些较旧的浏览器中可能会遇到兼容性问题，特别是那些不支持CSS3的浏览器。
Flex布局的基本属性
- `flex-direction`：定义主轴的方向。
- `justify-content`：设置子元素在主轴上的对齐方式。
- `align-items`：设置子元素在交叉轴上的对齐方式。
- `flex-wrap`：定义子元素是否换行。
- `align-content`：当Flex项目在交叉轴上有多余空间时，控制多行或多列的对齐方式。
6.盒模型：标准盒模型，怪异盒模型
盒模型：
盒模型是CSS技术所使用的一种思维模型，它是将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。
在盒模型中，内容部分指的是盒子里装的东西，也就是HTML标记中的元素本身。内边距部分是为了保护内容而设置的填充物，它位于内容和边框之间。边框部分就是盒子本身的壳，也就是HTML中的`<div>`、`<p>`、`<li>`等元素的外边框。外边距部分则是多个盒子之间排放时的空隙。
盒模型主要是针对页面布局的时候来使用，它规范了页面中所有元素的一个布局规范是由外向内进行布局。盒模型由外向内分别是：外边距、边框、内边距和内容。这种盒子模型是W3C的标准盒子模型，在大多数浏览器上都适用。
怪异盒模型：
怪异盒模型（或称为IE盒模型），这种模型主要表现在IE内核的浏览器上。两种模式可以通过box-sizing的方法进行转换。box-sizing中比较常用的两个属性值为content-box和border-box，它可以改变盒子模型的解析计算模式。在content-box模式下，元素的width和height属性值指的是内容区域（content）的宽度和高度，而padding和border则分别对应内边距和边框的宽度和高度。
因此，元素的实际宽度为content的宽度+左右内边距+左右边框；元素的实际高度为content的高度+上下内边距+上下边框。
而在border-box模式下，元素的width和height属性值指的是包含内容区、内边距（padding）和边框（border）的宽度和高度。这意味着，给元素设置width和height时，实际已经把padding和border的宽度考虑在内了。这种模式可以简化很多布局计算，使得盒子的总宽度和总高度更加直观可控。
主要区别：
盒模型和怪异盒模型的主要区别在于`width`和`height`属性的应用范围不同。
盒模型主要由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和content（内容）。
标准盒模型中，width和height属性仅包含content部分的尺寸，而怪异盒模型中，width和height属性则包括了content、padding和border的尺寸。这意味着在标准盒模型中，当你改变元素的宽度和高度时，只影响content部分，而在怪异盒模型中，改变的是content、padding和border的总和。
此外，通过修改元素的box-sizing属性，可以在这两种盒模型之间切换。设置box-sizing: border-box;将使元素采用怪异盒模型，而设置box-sizing: content-box;则使元素采用标准盒模型。这种灵活性使得开发者可以根据需要选择最适合的盒模型来布局和设计页面元素
7.float是在css中什么作用？
`float`是CSS中的一个属性，它的主要作用是使元素脱离正常的文档流，并浮动到其父容器的左侧或右侧。浮动元素仍然会占据一定的空间，但它们会从文档的普通流中移出，不会影响其他元素的布局。
当一个元素被设置为浮动时，它会向左或向右浮动，直到遇到其前一个浮动元素、父容器的边缘或者另一个浮动元素为止。浮动元素周围的空间会被其他元素填充，而不是像块级元素那样独占一行。
*`float`属性在CSS中的作用是使元素脱离正常的文档流，并允许它们向左或向右浮动，从而实现特定的布局效果。*
`float`属性有以下几个可选值：
1. `left`：元素向左浮动。
2. `right`：元素向右浮动。
3. `none`：元素不浮动，这是默认值。
浮动元素的一些特点：
- 浮动元素会脱离正常的文档流，不会影响其他元素的布局。
- 浮动元素之间不会相互影响，它们会各自独立地浮动。
- 浮动元素会形成BFC（块级格式化上下文），这意味着浮动元素内部和外部的布局规则会有所不同。
- 浮动元素可能会导致父元素高度塌陷，即父元素的高度变为0，因为浮动元素不再参与父元素高度的撑开。为了解决这个问题，可以使用`clear`属性清除浮动，或者给父元素添加一个空的块级元素作为占位符。
8.CSS的选择器，以及CSS3新增的选择器，并且他们的优先级
CSS 选择器：
1. **元素选择器**
```
p { color: red; }//选择所有的`<p>`元素，并将它们的文本颜色设置为红色。
```
2. **类选择器**
```
.my-class { font-size: 16px; }//选择所有具有`my-class`类的元素，并将它们的字体大小设置为16px。
```
3. **ID 选择器**
```
#my-id { background-color: yellow; }//选择具有`my-id`ID的元素，并将其背景颜色设置为黄色。
```
4. **属性选择器**
```
input[type="text"] { border: 1px solid black; }//选择所有`<input>`元素，其`type`属性值为`text`，并设置它们的边框样式。
```
CSS3新增选择器：
1. **伪类选择器**
- `:hover`
- `:active`
- `:focus`
- `:visited`
- `:nth-child()`
- `:last-child`
- `:first-of-type`
- `:last-of-type`
- `:only-of-type`
- `:nth-last-child()`
- `:nth-of-type()`
- `:nth-last-of-type()`
- `:checked`
- `:not()`
2. **结构伪类选择器**
- `:root`
- `:empty`
- `:target`
- `:not()`
3. **其他伪类选择器**
- `:lang()`
- `:enabled`
- `:disabled`
- `:checked`
4. **通用兄弟选择器**
```
h1 ~ p { color: blue; }//选择所有跟在一个`<h1>`元素后面的`<p>`元素，并将它们的文本颜色设置为蓝色。
```
5. **相邻兄弟选择器**
```
h1 + p { color: blue; }//选择紧跟在一个`<h1>`元素后面的`<p>`元素，并将它们的文本颜色设置为蓝色。
```
选择器的优先级：
CSS中的选择器优先级是按照以下顺序计算的：
1. **内联样式**（`style`属性）
2. **ID 选择器**
3. **类选择器、属性选择器、伪类选择器**
4. **元素选择器、伪元素选择器**
5. **通配符选择器（`*`）、子选择器（`>`）、相邻兄弟选择器（`+`）、通用兄弟选择器（`~`）
*如果多个选择器具有相同的优先级，那么最后定义的样式将被应用。如果样式规则之间存在冲突，浏览器将使用具有更高优先级的规则来覆盖具有较低优先级的规则。*
9.什么叫浅拷贝和深拷贝
浅拷贝和深拷贝
- **浅拷贝**：创建一个新对象，主要包含对原始对象中数据的引用。只是复制原始对象的顶层数据结构。如果原始对象中的字段是引用类型，复制的是引用而不是对象本身。
- **深拷贝**：会创建一个对象，并在新对象中复制原始对象的所有数据。当更新深拷贝对象中的数据时，不会影响原始数据。深拷贝中的“深”表示复制所有嵌套对象。复制对象与原始对象完全独立。
浅拷贝和深拷贝的区别
- **浅拷贝**：只复制原始对象的顶层数据结构，对于引用类型字段，复制的是引用而不是对象本身。因此，原始对象和复制对象之间共享相同的引用，对原始对象的修改会影响到复制对象，但是对于引用类型字段指向的对象本身的修改则不会影响。
- **深拷贝**：递归地复制原始对象的所有字段和引用指向的对象，不仅仅是复制引用本身，对新对象所做的修改不会影响到原始对象，因为它们拥有彼此独立的副本。
应用场景
- **浅拷贝**：通常用于创建简单的数据副本
- **深拷贝**：则通常用于创建完全独立的对象，以防止修改原始对象或副本的行为会互相影响。
实现方法
- **浅拷贝**：可以使用扩展运算符(`...`)或`Object.assign()`方法。
- **深拷贝**：可以通过递归方式实现，或者使用第三方库如`lodash`的`cloneDeep`方法。
10.keep-alive的作用是什么？user-agent的作用是什么？
keep-alive 的作用：
`keep-alive` 是一个 HTTP/1.1 的特性，用于在一个 TCP 连接上进行多个请求/响应交换，避免多次建立和关闭连接的时间消耗。
1. **减少连接建立和关闭的时间**：每次建立一个新的连接都需要经过三次握手，会增加延迟。使用 `keep-alive`，可以在一个已经建立的连接上进行多次请求/响应交换，从而减少了握手的时间消耗。
2. **减少服务器资源消耗**：频繁地建立和关闭连接会占用更多的服务器资源。`keep-alive` 可以复用一个已经存在的连接，降低服务器的负载。
3. **提高网络传输效率**：在一个TCP连接上进行多个请求/响应交换可以提高网络传输效率，因为TCP连接一旦建立，就会保持其传输性能。
user-agent 的作用
`User-Agent` 是一个 HTTP 请求头，用于标识发出请求的客户端信息。通常包括客户端软件的类型、操作系统、版本等信息。
1. **辅助服务器进行用户识别**：通过 `User-Agent`，服务器可以识别出用户使用的设备类型、操作系统以及浏览器等信息。使服务器可以根据用户的设备和浏览器特性提供定制化服务。
2. **辅助进行网站适配**：服务器可以根据 `User-Agent` 信息判断客户端设备的屏幕尺寸、分辨率等特性，提高浏览体验。
3. **辅助进行功能支持判断**：某些情况下，服务器需要根据客户端设备的特性来判断是否支持某些功能。例如，服务器可以通过 `User-Agent` 来判断客户端是否支持 HTML5 的某些特性。
11.null和undefined的区别？还有判定方法
`null` 和 `undefined` 都是 JavaScript 中表示“空值”或“缺失值”的特殊值
区别：
1. **意图**：
- `null`：通常表示一个变量被有意地赋予了空值或没有值。开发者可以使用 `null` 声明一个尚不存在的引用。
- `undefined`：当变量被声明，但尚未赋值时，其默认值为 `undefined`。还有一些其他情况下可能会遇到 `undefined`，如访问不存在的对象属性。
2. **数据类型**：
- `null` 属于引用类型，表示它是一个指向空引用的指针。
- `undefined` 属于基本类型（虽然在一些语言实现中它可能被视为引用类型）。
3. **通过 `typeof` 运算符进行类型检测**：
- 对于 `null`，使用 `typeof` 运算符会返回 `"object"`。
- 对于 `undefined`，使用 `typeof` 运算符会返回 `"undefined"`。
判定方法：
null:
1. 直接比较：
```javascript
if (a === null) {
// a 是 null
}
```
2. 使用 `typeof` 运算符
```javascript
if (a === null || typeof a === 'object' && !a) {
// a 是 null
}
```
由于 `typeof null` 返回 `'object'`，因此需要额外的条件来排除空对象引用。
3. 使用 `Array.includes()` 方法
```javascript
if ([null].includes(a)) {
// a 是 null
}
```
4. 使用 `JSON.stringify()`
```javascript
if (JSON.stringify(a) === 'null') {
// a 是 null
}
```
因为 `JSON.stringify()` 可能会因对象属性的顺序问题而产生不同的结果。但在判断 `null` 的情况下，这通常是一个有效的方法。
undefined:
1. 直接比较
```javascript
if (a === undefined) {
// a 是 undefined
}
```
2. 使用 `typeof` 运算符
```javascript
if (typeof a === 'undefined') {
// a 是 undefined
}
```
3. 使用 `Array.includes()` 方法
```javascript
if ([undefined].includes(a)) {
// a 是 undefined
}
```
4. 使用 `Object.values()`
```javascript
if (Object.values(a).includes(undefined)) {
// a 是 undefined
}
```
如果变量不是对象,不可使用
12.什么是JSX？
JSX（JavaScript XML）是一种在 JavaScript 代码中编写类似 HTML 结构的语法糖，JSX是JavaScript语法扩展，可以让你在JavaScript文件中书写类似HTML的标签。
JSX是一种在JavaScript中编写类似HTML的语法糖，常与React等前端库一起使用，以简化UI组件的声明和操作。Babel等工具可以将JSX转换为浏览器可执行的JavaScript代码。
13.react的生命周期方法有哪些？
1. `constructor(props)`：在组件实例化时调用，用于初始化组件状态（state）和绑定事件处理器。此方法是可选的。
2. `static getDerivedStateFromProps(nextProps, prevState)`:在组件挂载之前以及每次重新渲染之前调用。用于响应 props 的变化来更新组件状态。此方法是可选的。
3. `render()`:每个生命周期方法中唯一必需的方法。负责生成并返回组件的虚拟DOM。此方法不能修改组件状态或直接与DOM交互。
4. `componentDidMount()`:在组件挂载到 DOM 之后调用。此时可以安全地进行 DOM 操作、发起网络请求等。
5. `shouldComponentUpdate(nextProps, nextState)`:在组件重新渲染之前调用。可以根据条件返回 `true`（允许渲染）或 `false`（阻止渲染）来优化性能。此方法是可选的。
6. `static getSnapshotBeforeUpdate(prevProps, prevState)`:在组件实际更新（DOM 更新）之前调用。允许你在可能改变之前捕获 DOM 信息（例如滚动位置）。此方法是可选的。
7. `componentDidUpdate(prevProps, prevState, snapshot)`:在组件更新后调用。可以执行 DOM 操作、处理网络请求响应等。此方法是可选的。
8. `componentWillUnmount()`:在组件从 DOM 中卸载之前调用。用于清理组件（例如取消网络请求、移除 DOM 事件监听器等）。
9. `componentDidCatch(error, info)`:在子组件树中的任何组件抛出错误时调用。用于全局错误处理。此方法是可选的。
10. `static getDerivedStateFromError(error)`:当子组件树中的任何组件抛出错误时调用。用于渲染备用用户界面。此方法是可选的。
```javascript
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
componentDidMount() {
console.log('Component did mount');
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.count < 5;
}
componentDidUpdate(prevProps, prevState) {
console.log('Component did update');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
```
14.什么叫mixin
它是一种编程模式，允许将可复用的功能以对象的形式分发到其他类中，实现代码的模块化和复用。Mixin是一种提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
* 应用场景：用于提取组件中的公共逻辑或配置，减少代码冗余，提高代码复用性。
* 与继承的区别：Mixin和继承都可以实现代码复用，但Mixin不需要子类继承父类。Mixin更像是将多个类的功能“混合”到一个类中，而继承则是创建一个新的类，它是另一个类的子类。因此它在处理多重继承时更加灵活，避免了继承带来的复杂性。
* ```javascript
// 定义一个mixin
const myMixin = {
method1() {
console.log('This is a mixin method.');
}
};
// 使用mixin的类
class MyClass extends myMixin {
constructor() {
super();
this.method1(); // 调用mixin中的方法
}
}
```
扫一扫
8605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
