2024年1月12日

发布时间:2024年01月14日

1 实现九宫格布局,每个格子(小盒子)都有相同的边距,同时整体容器也有边距,可以使用多种CSS布局方法

1使用Flexbox布局:

.container {
 ?display: flex;
 ?justify-content: space-between; /* 分散对齐 */
 ?flex-wrap: wrap; /* 允许子项换行 */
 ?margin: 0 10px; /* 整体外边距 */
}
?
.box {
 ?width: calc(100% / 3 - 20px); /* 每个盒子宽度减去两边总边距 */
 ?margin: 10px; /* 每个盒子的内边距 */
}
?

2 使用Grid布局:

.container {
 ?display: grid;
 ?grid-template-columns: repeat(3, 1fr); /* 三列 */
 ?gap: 10px; /* 子项之间的间隔 */
 ?margin: 10px; /* 整体外边距 */
}
?
.box {
 ?padding: 10px; /* 如果需要内部边距 */
}
?

3 使用CSS Grid与Flexbox结合:

这种方式可以利用Flexbox来处理子项的水平间距,而Grid来处理垂直间距。

.container {
 ?display: flex;
 ?flex-wrap: wrap;
 ?justify-content: space-between;
 ?margin: 10px;
}
?
.box {
 ?display: grid;
 ?grid-template-columns: 1fr 1fr 1fr;
 ?gap: 10px;
 ?width: calc(100% / 3 - 20px);
 ?margin: 10px;
}
?

4 使用绝对定位和transform:

.container {
 ?position: relative;
 ?margin: 10px;
}
?
.box {
 ?position: absolute;
 ?top: 0;
 ?right: 10px;
 ?bottom: 10px;
 ?left: 10px;
}
?
.box:nth-child(3n) {
 ?right: 0;
}
?
.box:nth-child(n+4) {
 ?top: 30px;
}
?
/* 重复上方的nth-child规则,每次增加30px,直到达到9个盒子 */
?

5 使用BFC(块级格式化上下文)和浮动: 这种方式通过创建多个BFC来清除浮动

.container {
 ?width: 100%;
 ?margin: 10px;
 ?overflow: hidden; /* 创建BFC */
}
?
.box {
 ?width: calc(100% / 3 - 20px);
 ?margin: 10px;
 ?float: left; /* 浮动 */
 ?clear: both; /* 清除浮动 */
}
?

2 css中的伪类

CSS 伪类:

:link – 选择未访问的链接。 :visited – 选择已经访问过的链接。 :hover – 选择鼠标指针悬停其上的元素。 :focus – 选择拥有焦点的元素。 :active – 选择正在被激活的元素(例如:当用户点击链接时)。 :not() – 一个否定伪类,用于匹配不符合其参数的选择器。 :first-child – 选择元素的第一个子元素。 :last-child – 选择元素的最后一个子元素。 :nth-child() – 选择元素的第 n 个子元素,也可以指定是奇数或偶数子元素。 :first-of-type – 选择其父元素下类型相同的第一个子元素。 :last-of-type – 选择其父元素下类型相同的最后一个子元素。 :only-child – 选择其父元素下唯一的子元素。 :only-of-type – 选择其父元素下唯一指定类型的子元素。 :empty – 选择没有子元素的元素。 :enabled 和 :disabled – 选择可用或不可用的表单元素。 :checked – 选择被选中的复选框或单选按钮。 :before 和 :after – 创建伪元素,可以在元素的内容前或后插入内容。 ::first-letter 和 ::first-line – 选择文本的第一字母或第一行。 :selection – 选择用户选取的文本。

3 css优先级

!important>内联 > ID 选择器 > 类选择器 > 标签选择器

4 js数组方法中哪些是同步执行哪些是异步执行

同步执行的方法
push(): 向数组的末尾添加一个或多个元素,并返回新的长度。
pop(): 删除数组的最后一个元素,并返回那个元素。
shift(): 删除数组的第一个元素,并返回那个元素。
unshift(): 向数组的开头添加一个或多个元素,并返回新的长度。
splice(): 通过删除现有元素和/或添加新元素来更改一个数组的内容。
slice(): 返回数组的一个片段或子数组。
concat(): 合并两个或多个数组,并返回一个新的数组。
join(): 将数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。
indexOf(): 返回数组中第一个与指定值匹配的元素的索引。
lastIndexOf(): 返回数组中最后一個与指定值匹配的元素的索引。
forEach(): 对数组的每个元素执行一次提供的函数。
map(): 创建一个新数组,其结果是该数组中的每个元素调用一次提供的函数后的返回值。
filter(): 创建一个新数组,包含通过所提供函数实现的测试的所有元素。
reduce(): 对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
reduceRight(): 类似reduce(),但是从数组的末尾开始累加。
find(): 返回数组中满足提供的测试函数的第一个元素的值。
findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引。
every(): 检测数组所有元素是否都符合指定条件(使用函数进行检测)。
some(): 检测数组中是否有元素满足指定条件(使用函数进行检测)。
includes(): 判断数组是否包含某个指定的值,根据情况返回true或false。
异步执行的方法
sort(): 对数组元素进行排序。如果是比较复杂的排序,JavaScript 引擎可能会为了优化而异步执行这个方法。
toString(): 返回一个字符串表示数组的所有元素。
toLocaleString(): 返回一个字符串表示数组的所有元素。
pop() (当使用shift()、unshift()、splice()等方法修改数组时,如果涉及到复杂的操作,可能会异步执行)。

5 三维数组求和

三维数组在数据结构中可以理解为一个类似于立方体的数据容器,它由多个二维数组组成,每个二维数组又包含多个一维数组(或视为行)。三维数组中的元素通过三个索引来定位,通常表示为 array[z][y][x],这里的 z 是最外层的索引,对应于“高度”或“深度”,yx 分别对应于二维数组的行和列。

假设有一个 3x2x2 的三维数组:

[
  [
 ?  [1, 2],
 ?  [3, 4]
  ],
  [
 ?  [5, 6],
 ?  [7, 8]
  ],
  [
 ?  [9, 10],
 ?  [11, 12]
  ]
]

在这个例子中,我们可以这样理解:

  • 第一层 [0][1][2] 表示三个不同的 “平面” 或 “页面”。

  • 每个平面是一个 2x2 的二维数组。

  • 数组内元素的求和就需要分别遍历每一层(z)、每一行(y)和每一列(x),将所有元素相加。

对这个三维数组求和的过程会是这样的:

let sum = 0;
for (let z = 0; z < array.length; z++) {
 ?for (let y = 0; y < array[z].length; y++) {
 ? ?for (let x = 0; x < array[z][y].length; x++) {
 ? ? ?sum += array[z][y][x];
 ?  }
  }
}
console.log(sum); // 输出所有元素之和

多维数组是一种可以扩展到任意维度的数据结构,其中最常见的是二维数组(矩阵)和三维数组。多维数组的每个元素可以通过一个索引序列来访问,索引的数量与数组的维度相同。

例如:

  • 一维数组:array[index1]

  • 二维数组:array[index1][index2]

  • 三维数组:array[index1][index2][index3]

  • N 维数组:array[index1][index2]...[indexN]

对多维数组求和时,通常需要遍历所有维度,并将每个元素加到总和上。对于不同编程语言,实现方式会有所差异,但基本思路都是逐层深入地遍历数组,直到处理到非数组类型的元素并进行累加。

function sumMultiDimensionalArray(arr) {
 ?let total = 0;
 ?
 ?arr.forEach(element => {
 ? ?if (Array.isArray(element)) {
 ? ? ?total += sumMultiDimensionalArray(element);
 ?  } else {
 ? ? ?total += element;
 ?  }
  });
?
 ?return total;
}
?
// 使用示例
let multiDimArray = [
  [1, 2, [3, 4]],
  [5, [6, 7], 8]
];
?
console.log(sumMultiDimensionalArray(multiDimArray)); // 输出:36
文章来源:https://blog.csdn.net/qq_46670243/article/details/135555743
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。