2024年1月12日

news/2024/2/25 12:47:41/文章来源:https://blog.csdn.net/qq_46670243/article/details/135555743

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_925353.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ONE·MySQL || 常见的基本函数】

总言 主要内容&#xff1a;介绍了MySQL中常用的基本函数。一些聚合函数、时间日期函数、字符串函数、数字函数等。       文章目录 总言1、聚合函数1.1、汇总1.2、COUNT()函数1.2.1、基本说明1.2.2、使用演示 1.3、SUM( )函数1.3.1、基本说明1.3.2、使用演示 1.4、AVG( )函…

java基础知识点系列——数据输入(五)

java基础知识点系列——数据输入&#xff08;五&#xff09; 数据输入概述 Scanner使用步骤 &#xff08;1&#xff09;导包 import java.util.Scanner&#xff08;2&#xff09;创建对象 Scanner sc new Scanner(System.in)&#xff08;3&#xff09;接收数据 int i sc…

PHP开发日志 ━━ php8.3安装与使用组件Xdebug

今天开头写点历史&#xff1a; 二十年前流行asp&#xff0c;当时用vb整合常用函数库写了一个dll给asp调用&#xff0c;并在此基础上开发一套仿windows界面的后台管理系统&#xff1b;后来asp逐渐没落&#xff0c;于是在十多年前转投php&#xff0c;不久后用php写了一套mvc框架&…

C++——map和set的基本使用

目录 一&#xff0c;关联式容器 二&#xff0c;键值对 三&#xff0c;set的使用 3.1 set介绍 3.2 set的插入和删除 3.3 set的pair 3.4 multiset 四&#xff0c;map的使用 4.1 map介绍 4.2 map实现简易字典 4.3 map实现统计次数 4.4 map的[] 五&#xff0c;使用map或…

TRB 2024论文分享:基于生成对抗网络和Transformer模型的交通事件检测混合模型

TRB&#xff08;Transportation Research Board&#xff0c;美国交通研究委员会&#xff0c;简称TRB&#xff09;会议是交通研究领域知名度最高学术会议之一&#xff0c;近年来的参会人数已经超过了2万名&#xff0c;是参与人数和国家最多的学术盛会。TRB会议几乎涵盖了交通领域…

【REST2SQL】07 GO 操作 Mysql 数据库

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 MySQL是一个关系型数据库管理系统&#xf…

系统性学习vue-vue核心

做了三年前端,但很多系统性的知识没有学习 还是从头系统学习一遍吧 课程是b站的Vue2.0Vue3.0课程 后续还会学习的如下,就重新开一篇了,不然太长,之后放链接 vue组件化编程 vue-cli 脚手架 vue中的ajax vue-router vuex element-ui vue3 老师推荐的vscode针对vue的插件: Vue 3…

在线项目实习|2024寒假项目实战火热报名中!

一、在线实习项目分类 二、在线实习项目流程 三、在线实习项目优惠及项目特色 1、师傅带练教学模式&#xff0c;手把手教你掌握 采用“师带徒”的教学模式&#xff0c;课程以“项目前置知识学习 师傅带练 项目实战”贯穿&#xff0c;强调动手实操&#xff0c;内容以代码落地为…

mp4文件全部转换为mp3

问题 今天突发奇想&#xff0c;想把mp4视频转换为mp3来收听&#xff0c;于是想到了ffmpeg工具 步骤 安装ffmpeg环境 要在 Windows 上配置 FFmpeg 环境&#xff0c;你可以按照以下步骤进行操作&#xff1a; 下载 FFmpeg&#xff1a; 首先&#xff0c;你需要下载 FFmpeg 的 W…

图像处理:孤立点的检测

图像处理-孤立点的检测 孤立点的检测在图像处理中通常涉及到检测图像中的突变或者边缘&#xff0c;而使用二阶导数是一种常见的方法。一阶导数可以帮助找到图像中的边缘&#xff0c;而二阶导数则有助于检测边缘上的峰值&#xff0c;这些峰值可能对应于孤立点或者特殊的图像结构…

如何在30秒内学会使用pprof分析Go

假设下面的代码是你要分析的 Go 代码&#xff1a; package mainimport ("fmt""sync""time" )// 模拟耗时操作 func hardWork(wg *sync.WaitGroup) {defer wg.Done()fmt.Printf("Start: %v\n", time.Now())// 模拟耗内存a : []string{…

[开发语言][c++]:Static关键字和全局变量

Static关键字和全局变量 1. 生命周期、作用域和初始化时机2. 全局变量3. Static 关键字3.1 面向过程3.1.1 静态全局变量3.1.2 静态局部变量&#xff08;单例中会使用&#xff09;3.1.3 静态函数 3.2 面向对象3.2.1 类内静态成员变量3.2.2 类内静态成员函数 Reference 写在前面&…

伪装目标检测模型论文阅读之:Zoom in and out

论文链接&#xff1a;https://arxiv.org/abs/2203.02688 代码;https://github.com/lartpang/zoomnet 1.摘要 最近提出的遮挡对象检测&#xff08;COD&#xff09;试图分割视觉上与其周围环境融合的对象&#xff0c;这在现实场景中是非常复杂和困难的。除了与它们的背景具有高…

C语言中关于指针的理解及用法

关于指针意思的参考&#xff1a;https://baike.baidu.com/item/%e6%8c%87%e9%92%88/2878304 指针 指针变量 地址 野指针 野指针就是指针指向的位置是不可知的&#xff08;随机的&#xff0c;不正确的&#xff0c;没有明确限制的&#xff09; 以下是导致野指针的原因 1.指针…

力扣每日一练(24-1-13)

如果用列表生成式&#xff0c;可以满足输出的型式&#xff0c;但是不满足题意&#xff1a; nums[:] [i for i in nums if i ! val]return len(nums) 题意要求是&#xff1a; 你需要原地修改数组&#xff0c;并且只使用O(1)的额外空间。这意味着我们不能创建新的列表&#xff…

【java八股文】之Spring系列篇

【java八股文】之JVM基础篇-CSDN博客 【java八股文】之MYSQL基础篇-CSDN博客 【java八股文】之Redis基础篇-CSDN博客 【java八股文】之Spring系列篇-CSDN博客 【java八股文】之分布式系列篇-CSDN博客 【java八股文】之多线程篇-CSDN博客 【java八股文】之JVM基础篇-CSDN博…

ES6(ECMAScript 6.0)

ES6 学习链接ES6什么是ES6&#xff1f;ECMAScript 和 JavaScript 的关系 ECMAScript各版本新增特性ES6 块级作用域 let 学习链接 ES6简介 ECMAScript简介及特性&#xff08;科普&#xff01;很详细&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 20分钟上手ES…

OpenHarmony基于HDF简单驱动开发实例

OpenHarmony基于HDF简单驱动开发实例 背景 OpenHarmony-3.0-LTS qemu_small_system_demo liteos_a qemu 添加配置 device/qemu/arm_virt/liteos_a/hdf_config/device_info/device_info.hcs device_info 新增&#xff1a; sample_host :: host {hostName "sample…

Docker 配置国内镜像源加速

1. 国内镜像源总览 名称路径中国官方镜像https://registry.docker-cn.com网易163镜像http://hub-mirror.c.163.com中科大镜像https://docker.mirrors.ustc.edu.cn阿里云镜像https://[xxx].mirror.aliyuncs.com 2. 阿里云镜像源 地址&#xff1a;https://cr.console.aliyun.c…

基于Java SSM框架实现医院管理系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现医院管理系统演示 SSM框架 当今流行的“SSM组合框架”是Spring SpringMVC MyBatis的缩写&#xff0c;受到很多的追捧&#xff0c;“组合SSM框架”是强强联手、各司其职、协调互补的团队精神。web项目的框架&#xff0c;通常更简单的数据源。Spring属于…