当前位置： 首页 > news >正文

现今 CSS3 最强二维布局系统 Grid 网格布局

news 2025/11/12 4:37:39

深入学习 CSS3 目前最强大的布局系统 Grid 网格布局

Grid 网格布局的基本认识

Grid 网格布局: Grid 布局是一个基于网格的二位布局系统，是目前 CSS 最强的布局系统，它可以同时对列和行进行处理（它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局）

CSS 布局的过渡: CSS 一直用于对页面进行布局，但一直都不是很完美

  • 1.一开始我们使用 table 做布局，然后转向浮动、定位以及 inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）

    • "Hack" 通常指的是一种快速、非标准或非预期的解决方案，用于绕过某些限制或问题

  • 2. 随着 CSS3 的引入，特别是 Flexbox 和 Grid 布局的出现，网页布局变得更加直观和灵活，减少了对这些 “Hack” 方法的依赖，Flexbox 和 Grid 提供了更强大的布局控制，解决了许多历史遗留的布局问题，如垂直居中、响应式设计等

  • 3. Flexbox 在一定程度上解决了这些问题，但它的目的是为了更简单的一维布局，而不是复杂的二维布局

  • 4. Flexbox 布局是轴线布局，只能指定 "项目" 针对轴线的位置，可以看作是一维布局 → 而 Grid 布局则是将容器划分成 "行" 和 "列"，产生单元格，然后指定 "项目所在" 的单元格，可以看作是二维布局（Grid 布局远比 Flex 布局强大）

  • 5. Grid 布局是第一个专门为解决布局问题而生的 CSS 模块

术语: 在深入了解网格的概念之前，我们需要了解一些重要的术语

  • 1. 网格容器与项目

    • 容器（Container）: 设置了 "display: gird / inline-grid" 的元素，就称之为网格容器（grid container）

    • 项目（Item）: grid 容器中的直接子元素就为网格项目（grid item）

      • .container {display: gird
}

      • + 下面的 .container 元素就为网格容器（grid container），所有的直接子元素 .item 就为该网格容器的一个个项目（grid item）
<div class="container"><div class="item"></div> <div class="item"><p class="sub-item"></p></div><div class="item"></div>
</div>

  • 2. 行和列: 容器里面的水平区域称为 "行"（row）,垂直区域称为 "列"（column）

    • 在这里插入图片描述

  • 3. 单元格: 行和列的交叉区域，称为 "单元格"（cell）

  • 4. 网格线: 划分网格的线，称为"网格线"（grid line），水平网格线划分出行，垂直网格线划分出列

    • 在这里插入图片描述

Grid 网格布局的使用

Grid 网格布局的属性主要分为两类: 一类定义在容器上面，称为容器属性，另一类定义在项目上面，称为项目属性

容器属性

display: 将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)

  • grid - 生成一个块级 (block-level) 网格

  • inline-grid - 生成一个行级 (inline-level) 网格

  • subgrid - 如果你的 grid container 本身就是一个 grid item（即,嵌套网格），你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小

  • .container {display: grid | inline-grid | subgrid;
}

  • tip: 注意：column, float, clear, 以及 vertical-align 对一个 grid container 没有影响（即设置这些属性了也无效）

grid-template-columns / grid-template-rows: 划分行和列，使用空格来分隔的多个值来定义网格的列和行

  • grid-template-columns: - 属性定义每一列的列宽

  • grid-template-rows: - 属性定义每一行的行高

  • .container {display: grid; /* 定义网格布局 */grid-template-rows: 100px 100px 100px; /* 定义每一行行高 */grid-template-columns: 100px 100px 100px; /* 定义每一列列宽 */
}+ 上面代码指定了一个三行三列的网格，列宽和行高都为 100px.item {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid white;background-color: orange;color: white;
}

  • <body><span>H</span><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div><span>H</span>
</body>

  • 在这里插入图片描述

  • repeat(count,any-value): - 有时候，重复写同样的值非常麻烦，尤其网格很多时 → 这时，可以使用repeat()函数，简化重复的值

    • + 通过 repeat 函数来简化上面的写法
.container {display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);
}

  • auto-fill 关键字: - 有时，单元格的大小是固定的，但是容器的大小不确定 → 如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 “auto-fill” 关键字表示自动填

    • .container {display: grid;grid-template-columns: repeat(auto-fill, 100px); /* 具体多少列根据容器大小自动划分（每列列宽 100px） */grid-template-rows: repeat(3, 100px);
}+ 下图列数只是某一容器大小的示例图，并非所有，具体列数根据对应的容器大小与列宽有关

    • 在这里插入图片描述

  • auto-fit 关键字: - 该关键字与上面的 auto-fill 的行为基本是相同的，都会尽可能的生成更多的列或行，但是两者也存在一点区别

    • auto-fill 不管单元格是否中是否有元素，都会生产对应单元格的空间

    • auto-fit 则是如果单元格中没有元素时，会将对应的列宽收缩为 0

    • 上面文字描述起来可能比较抽象，如下两图示例（为了更好的展示对应的区别，先将上面单元格的数量缩减成 3 个先）

    • 在这里插入图片描述

    • 在这里插入图片描述

    • 🔺可以理解为 auto-fill 会尽可能的沾满容器空间，所以可能会存在一些空单元格 → 而 auto-fit 不会因为容器还有剩余宽度而进行生成更多的单元格，而是会收缩网格（只生成对应有内容的单元格 - 🔺常用）

  • fr 关键字: - 网格布局提供了fr关键字（fraction 的缩写，意为"片段"），该关键字可以更方便的定义单元格之间的比例关系

    • 如下三列宽分别为 1fr 2fr 3fr 时，就表示第二项是第一项的两倍，第三项就是第一项的三倍

    • 在这里插入图片描述

    • 在这里插入图片描述

  • minmax(min,max): - 该函数可以生成一个长度范围，表示长度在这个范围之中

    • 如 minmax(300px, 1fr) 就表示列宽不小于 300px，不大于 1fr
    • 在这里插入图片描述

  • auto 关键字: - 该关键字表示长度由浏览器进行决定（也可以理解为默认会自动吸收对应容器的剩余长度，当然如果对应单元格元素设置了 min-width/max-width 当达到对应的最值时，对应的效果可能就会有些出入）

    • 在这里插入图片描述

  • auto / fr / minmax: - 该三个对应的功能都比较类似，都会自动吸收容器的剩余空间，但如果同时存在时也会有对应的优先级与对应需要注意的问题

    • 优先级: - minmax 优先级大于 fr，fr 的优先级
    • tip: - 为了保证最小空间，网格可能会超出容器元素的范围（auto 的最小宽度为 fit-content，即内容宽度）

  • 网格线的名称: - grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名字，后面网格项目（item）可以使用对应的网格线名称，可以更加方便将项目元素布局到对应想要的位置上（网格项目中具体如何使用，后面网格项目属性讲到时再进行演示）

    • .container {display: grid;grid-template-columns: [col-1] 100px [col-2] auto [col-3] 100px [col-4];grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px [row-4];
}

    • 在这里插入图片描述

gap / row-gap / column-gap : 用来设置行与行之间的间隔（行间距），与列与列的间隔（列间距）

  • + 普通写法{row-gap: 设置行与行之间的间隔（行间距）; column-gap: 设置列与列之间的间隔（列间距）; }+ 我们也可以上面两个属性的简写属性 gap 来快速设置对应的间隔: gap: row-gap column-gap{gap: 行间距 列间距;}+ 当行间距与列间距相同时，我们也可以只需写一个值{gap: 行列间距;}

  • .container {...row-gap: 12px; /* 设置行间距 */column-gap: 12px; /* 设置列间距 */
}

  • 在这里插入图片描述

grid-auto-flow: 用于指定网格中项目的放置流向（放置顺序），值通常为 row（先行后列） 或 column（先列后行），默认为 row 即先行后列 → 基本效果如下示例图

  • 在这里插入图片描述

  • grid-auto-flow 属性除了可以设置成 row 和 column，还可以设置成 row dense 和 column dence，第二个值主要用于某些项目在指定完位置后，剩下的项目怎么放置（如: 先行后列，并且尽可能紧密填满） → 文字描述可能会比较抽象，我们可以通过下面几张图来进行理解

    • 在这里插入图片描述

    • 在这里插入图片描述

grid-template-areas: 网格布局中允许通过该属性来指定一些区域（area），每一个区域由一个或多个单元格组成

  • {grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-template-areas:"a b c""d e f""g h i";
}
+ 例1: 如上述代码就相当于给网格划分出 9 个单元格，人后然后将其定名为 a-i 的九个区域，分别对应这九个单元格

  • {grid-template-areas: 'a a a''b b b''c c c';
}
+ 例2: 上面代码将 9 个单元格分成 a、b、c 三个区域

  • {grid-template-areas: 'a . c''d . f''g . i';
}
+ 例3: 如果某些区域不需要利用，则使用 "点"（.）表示

  • grid-template-areas: "header header header""main main sidebar""footer footer footer";
+ 🔺例4: 上面代码中，顶部是页眉区域 header，底部是页脚区域 footer，中间部分则为 main 和 sidebar

  • 作用: - 当在网格容器中划分好对应的区域后，我们可以在子元素（网格项目）中通过 grid-area 属性，来对某一个网格项目快速的放置到对应的区域中（具体图例演示，在后面项目属性 grid-area 中进行更加直观的示例）

  • tip: - 需要注意区域的命名会影响到网格线，每个区域的起始网格线会自动命名为 "区域名-start"，终止网格线会自动命名为 "区域名-end"

place-items / justify-items / align-items: 这些属性用于设置单元格中元素的摆放位置，justify-items 水平方向，align-items 垂直方向，place-items 前面两个的简写方式

  • + 属性值: 左 中 右 拉伸
.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;place-items: <align-items> <justify-items>; /* 简写: 如果只写一个值时，将会认为这两个值相等 */
}+ 对应属性值的作用（及对应 justify-items 示例图）:- start - 对齐单元格的起始边缘- end - 对齐单元格的结束边缘- center - 单元格内部居中- stretch - 拉伸，占满单元格的整个宽度（默认值） → 当元素没有指定具体的大小时

  • 在这里插入图片描述

place-content / justify-content / align-content: 这些属性用于定义整个网格区域在容器元素的摆放位置，justify-content 水平方向，align-content 垂直方向，place-content 前面两个的简写方式

  • + 属性值: 这些属性值跟 flex 布局中的基本一致
.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly;  place-content: <align-content> <justify-content>; /* 简写: 如果只写一个值时，将会认为这两个值相等 */
}+ 对应属性值的作用（及对应 justify-content 示例图）:- start - 对齐容器的起始边框（默认）- end - 对齐容器的结束边框- center - 容器内部居中- stretch - 项目大小没有指定时，拉伸占据整个网格容器（即没有通过 grid-template-columns / grid-template-rows 指定对应列宽或行高时）- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔（两端对齐）- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

  • 在这里插入图片描述

grid-auto-rows / grid-auto-columns: 用于指定一些自动生成的行和列，对应的行高与列宽（如: 当一个网格是三行三列的，但里面某一个网格项目指定在第 5 行等等，此时网格就会自动生成一些行或列 → 或在一个三行三列的网格中只有 9 个单元格，但网格中的元素却超出了九个时，此时也会自动生成一行或列）→ 这些自动生成的行或列，对应的行高或列宽是 fit-content 适应内容的 → 而该两个属性就是用来指定一些自动生成的行或列对应的行高与列宽的

  • 如下示例: 在一个三行三列的网格容器中，有十个子元素 → 因为网格单元格不够，就会自动生成一行，我们可以通过 grid-auto-row 属性来指定对应自动生成行的行高（列同理）

    • .container {gap: 6px;display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-auto-rows: 100px; /* 指定自动生成的行的行高大小 */
}

    • 在这里插入图片描述

grid-template / grid:

  • grid-template: - 该属性为 grid-template-columns 、grid-template-rows 和 grid-template-areas 这三个属性的简写形式
  • grid: - 该属性为 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 这六个属性的简写形式
  • tip: - 从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了

项目属性

grid-row-start / grid-row-end / grid-column-start / grid-column-end :

  • （1）用于定义某个网格项目的的位置，通过指定项目的四个边框，分别定位在哪根网格线上

    • + 如下: 将第一个网格项目的网格项的行和列都在对应行或列的 1 到 3 网格线上
.item1 {grid-row-start: 1; /* 定义项目行开始线 */grid-row-end: 3; /* 定义项目行结束线 */grid-column-start: 1; /* 定义项目列开始线 */grid-column-end: 3; /* 定义项目列结束线 */
}

    • 在这里插入图片描述

  • （2）这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字

    • .container {width: 400px;display: grid;gap: 6px;/* 给网格容器对应的网格线命名 */grid-template-columns: [column-1] 100px [column-2] 100px [column-3] 100px;grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px;
}/* 通过命名网格线来指定 item1 对应的放置位置 */
.item1 {grid-row-start: row-1;grid-row-end: row-3;grid-column-start: column-1;grid-column-end: column-3;
}

    • 在这里插入图片描述

  • （3）在该四个属性上也可以使用 span 关键字 来表示跨越多少个网格（↓）

    • {grid-row-start: span 所要跨越的网格个数;grid-column-start: span 3; /* 如: 表示该项目在列上跨越 3 个单元格 */
}

    • 在这里插入图片描述

grid-row / grid-column: 该两个属性为上面 grid-row-start / grid-row-end / grid-column-start / grid-column-end 属性的简写形式

  • .item {grid-column: <start-line> / <end-line>;grid-row: <start-line> / <end-line>;
}+ 该两个属性只是上面的简写形式，所以具体就不做过多的演示了

grid-area: 属性用于指定项目放在哪一个区域，来快速放置对应项目到指定的位置上（具体网格区域的定义方式，参照前面）

  • 我们可以通过在网格容器上定义好对应的区域，在在对应的网格项目上通过该属性来指定项目所要放置的位置，从而实现快速的实现想要的布局效果，如下 ↓
  • 在这里插入图片描述

place-self / justify-self / align-self: 这些属性用于设置单元格内容的摆放位置，justify-self 水平方向，align-self 垂直方向，place-self 前面两个的简写方式

  • tip: 该三个属性与前面容器属性中 place-items / justify-items / align-items 的作用一样，不同的容器属性设置会作用在所有的单元格上，而该项目属性（slef）只作用于某个项目上（单元格）

  • .item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}
+ 因为前面容器属性 justify-items 上已经解释了每个属性值的含义了，所以这里就不再过多的解释每一个属性值了

  • 在这里插入图片描述

其它属性补充

  • z-index: 如果单元格中的元素与其它单元格元素出现层叠是，可以通过该属性来指定对应的层叠顺序（与 position 层叠同理）

    • 例如: 因为元素的大小可以跟单元格的大小无关，即元素可以指定比单元格更大的大小，所以就有可能会超出到其它的单元格上 → 与其它单元格元素产生了层叠
    • 在这里插入图片描述

  • order: 属性规定了弹性容器中的可伸缩项目在布局时的顺序（flexbox），该属性再网格布局中同样适用，值越小越布局顺序越靠前（如下示例图）

    • 在这里插入图片描述

相关文章：

现今 CSS3 最强二维布局系统 Grid 网格布局

深入学习 CSS3 目前最强大的布局系统 Grid 网格布局 Grid 网格布局的基本认识 Grid 网格布局: Grid 布局是一个基于网格的二位布局系统&#xff0c;是目前 CSS 最强的布局系统&#xff0c;它可以同时对列和行进行处理&#xff08;它将网页划分成一个个网格&#xff0c;可以任…...

编程日记 2024/10/21 2:07:46

【图解版】力扣第146题：LRU缓存

力扣第146题&#xff1a;LRU缓存 一、LRU算法1. 基本概念2. LRU 和 LFU 的区别&#xff1a;3. 为什么 LRU 不需要记录使用频率&#xff1f; 二、Golang代码实现三、代码图解1. LRUCache、DLinkedNode两个结构体2. 初始化结构体对象3. addToHead函数4. removeNode函数5. moveToH…...

编程日记 2024/10/21 2:06:45

数据库知识点整理

DDL DDL-数据库操作 show databases ------------ 查看所有数据库 select database(); ----------查看当前数据库 create database 数据库名&#xff1b;---- 创建数据库 use 数据库名&#xff1b; --------------使用数据库 drop database 数据库名&#xff1b;--…...

编程日记 2024/10/21 2:04:43

【JVM】内存模型

文章目录 内存模型的基本概念案例 程序计数器栈Java虚拟机栈局部变量表栈帧中局部变量表的实际状态栈帧中存放的数据有哪些 操作数栈帧数据 本地方法栈 堆堆空间是如何进行管理的? 方法区静态变量存储 直接内存直接内存的作用 内存模型的基本概念 在前面的学习中,我们知道了字…...

编程日记 2024/10/21 2:03:41

代码随想录：二叉树的四种遍历

144. 二叉树的前序遍历 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullpt…...

编程日记 2024/10/21 2:02:40

【Linux】从多线程同步到生产者消费者模型：多线程编程实践

目录 1.线程的同步 1.1.为什么需要线程的同步&#xff1f; 2.2.条件变量的接口函数 2.生产消费模型 2.1 什么是生产消费模型 2.2.生产者消费者模型优点 2.3.为何要使用生产者消费者模型 3.基于BlockingQueue的生产者消费者模型 3.1为什么要将if判断变成while&#xff…...

编程日记 2024/10/21 1:59:38

如何在word里面给文字加拼音？

如何在word里面给文字加拼音&#xff1f;在现代社会&#xff0c;阅读已经成为了我们日常生活中不可或缺的一部分。尤其是在学习汉语的过程中&#xff0c;拼音的帮助显得尤为重要。为了帮助大家更好地理解和掌握汉字的发音&#xff0c;许多教师和学生都希望能够在Word文档中为文…...

编程日记 2024/10/21 1:58:36

Detr论文精读

摘要&#xff1a; 作者提到&#xff0c;该方法将物体检测看做直接的集合预测&#xff0c;在传统的目标检测算法中&#xff0c;会先生成候选区域&#xff0c;然后对每个候选区域进行单独的预测&#xff08;包括物体的分类和预测框的回归&#xff09;&#xff0c;集合预测就是直…...

编程日记 2024/10/21 1:57:35

找寻孤独伤感视频素材的热门资源网站推荐

在抖音上&#xff0c;伤感视频总是能够引起观众的共鸣&#xff0c;很多朋友都在寻找可以下载伤感视频素材的地方。作为一名资深的视频剪辑师&#xff0c;今天我来分享几个提供高清无水印伤感素材的网站&#xff0c;如果你也在苦苦寻找这些素材&#xff0c;不妨看看以下推荐&…...

编程日记 2024/10/21 1:55:33

大模型~合集13

我自己的原文哦~ https://blog.51cto.com/whaosoft/12302606 #TextRCNN、TextCNN、RNN 小小搬运工周末也要学习一下~~虽然和世界没关 但还是地铁上看书吧, 大老勿怪 今天来说一下 文本分类必备经典模型 模型 SOTA&#xff01;模型资源站收录情况 模型来源论文 RAE ​​ht…...

编程日记 2024/10/21 1:54:32

【Next.js 项目实战系列】04-修改 Issue

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】03-查看 Issue 修改 Issue 添加修改 Button​ 本节代码链接 安装 Radix UI 的 Ra…...

编程日记 2024/10/21 1:53:31

【Linux】并行与并发（含时间片）

简单来说 并发&#xff1a;多个进程轮流使用同一个CPU&#xff0c;在逻辑层面上&#xff0c;一段时间内推进完成了多个进程 并行&#xff1a;机器中有多个CPU可以使用&#xff0c;在物理层面上&#xff0c;做到同一时间会有多个进程同时在运行 举个例子&#xff1a;一群人需要…...

编程日记 2024/10/21 1:50:28

【Flutter】页面布局：弹性布局（Flex）

在 Flutter 开发中&#xff0c;布局是非常重要的部分。布局系统允许开发者控制和管理界面上的组件如何排列和展示。弹性布局&#xff08;Flex&#xff09;是其中一个非常强大且常用的布局组件&#xff0c;它能够在水平方向或垂直方向上灵活调整子组件的空间分配比例。Row 和 Co…...

编程日记 2024/10/21 1:49:27

深入解析 Go 语言接口：多接口实现与接口组合的实际应用

文章目录 一、引言二、一个类型实现多个接口1. 定义多个接口2. 类型实现多个接口3. 使用多个接口 三、接口的组合1. 接口嵌套2. 实现复合接口 四、实际开发中的应用场景1. 多态与模块化设计2. 松耦合系统设计3. 测试与依赖注入4. 事件驱动架构中的应用 五、小结 一、引言 在 G…...

编程日记 2024/10/21 1:48:26

Eclipse——Java开发详解

Eclipse 1、配置JDK2、设置编译版本2.1、全局编译版本2.2、项目编译版本2.3、Web项目编译版本 3、设置工作目录4、创建Java项目5、配置Tomcat6、创建Web项目7、配置Maven8、创建Maven项目8.1、普通Maven项目8.2、Maven Web项目 9、创建SpringBoot项目10、设置字体11、设置代码提…...

编程日记 2024/10/21 1:47:24

练手小项目推荐

以下是一些练手项目推荐&#xff0c;我可以给你一些适合学生毕业设计的小项目建议&#xff0c;既可以锻炼技能&#xff0c;也能完成学术要求。以下是一些可行的毕业设计项目建议&#xff1a; 校园导航APP 功能&#xff1a;为校园内的新生和访客提供导航&#xff0c;标记教室、…...

编程日记 2024/10/21 1:46:22

一图秒懂色彩空间和色彩模型

色彩空间和色彩模型 想必学过图像处理或者摄影的小伙伴都知道这两个词&#xff0c;看了一些博客&#xff0c;发现很少有人把这两个概念说清楚的&#xff0c;大多数都是混在一起&#xff0c;色彩模型和色彩空间的概念混为一谈&#xff0c;很让人疑惑。   这里我们用一张图来解…...

编程日记 2024/10/21 1:45:21

控制Stable Diffusion生成质量的多种方法

在Stable Diffusion绘图中&#xff0c;控制AI生成图像的质量可以通过多种方法来实现。以下是几种常见的方法&#xff1a; 1. 从底模控制&#xff08;Checkpoint&#xff09; 使用不同的模型检查点&#xff08;Checkpoints&#xff09;可以显著影响生成图像的质量和细节。选择一…...

编程日记 2024/10/21 1:44:20

递归算法笔记

根据b站视频整理的 **视频地址&#xff1a;**https://www.bilibili.com/video/BV1S24y1p7iH/?spm_id_from333.788.videopod.sections&vd_source6335ddc7b30e1f4510569db5f2506f20 最常见的一个递归例子&#xff1a; 斐波那契数列&#xff1a;1&#xff0c;2&#xff0c;3…...

编程日记 2024/10/21 1:42:17

Android——发送彩信

跳转到相册选择图片 btn_jump.setOnClickListener(new View.OnClickListener() {Overridepublic void onClick(View view) {// 跳转到系统相册选择图片并返回Intent intent new Intent(Intent.ACTION_GET_CONTENT);// 设置图片类型为图片类型intent.setType("image/*&quo…...

编程日记 2024/10/21 1:39:14

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/11/10 7:02:50

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/9 17:12:55

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/11/8 2:27:49

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/11/7 20:03:04

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/11/9 13:32:25

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/4 7:58:33

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2025/11/9 8:55:10