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

使用CSS Grid布局时，如何避免元素重叠？

news 来源：原创 2025/8/27 15:51:02

使用CSS Grid布局时，如何避免元素重叠？

文章目录

  • 使用CSS Grid布局时，如何避免元素重叠？
    • 1. 引言
    • 2. 元素重叠的常见原因
      • 2.1 显式定位错误
      • 2.2 使用 grid-auto-flow: dense
      • 2.3 网格区域定义不明确
      • 2.4 内容尺寸超出预期
    • 3. 解决策略
      • 3.1 明确划分网格区域
      • 3.2 使用显式定位属性
      • 3.3 谨慎使用 grid-auto-flow: dense
      • 3.4 设置合适的间距
      • 3.5 控制内容尺寸
      • 3.6 定期检查和调试
    • 4. 实例分析
    • 5. 总结

1. 引言

CSS Grid布局为复杂页面设计提供了强大工具，但在布局过程中，错误的网格项定位或配置不当可能导致元素重叠。本文将详细讨论导致重叠的常见原因，并介绍多种避免重叠的方法和最佳实践，确保页面布局清晰、结构合理。

2. 元素重叠的常见原因

2.1 显式定位错误

当开发者手动指定网格项的起始和结束行/列时，若多个项目被分配到相同的网格区域，便会发生重叠。

2.2 使用 grid-auto-flow: dense

启用密集布局模式（dense）时，浏览器会自动将空缺位置填充，但这种自动重排有时会将项目放置在其他项目已占用的区域，造成重叠。

2.3 网格区域定义不明确

利用 grid-template-areas 定义布局区域时，如果区域名称重复或定义不完整，可能导致某些网格项默认放置到错误区域，从而重叠。

2.4 内容尺寸超出预期

当网格项内部内容尺寸过大，可能突破网格单元的边界，导致视觉上出现重叠或挤压现象。

3. 解决策略

3.1 明确划分网格区域

利用 grid-template-areas 明确指定各部分区域，并为每个网格项分配唯一区域。这样可以确保不同元素不会意外地放在同一区域内。

.container {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: auto;grid-template-areas:"header header header""sidebar main main""footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

3.2 使用显式定位属性

通过 grid-column 和 grid-row 属性为每个网格项精确定位，避免多个项目占据相同的网格单元。

.item1 { grid-column: 1 / 3; grid-row: 1; }
.item2 { grid-column: 3; grid-row: 1; }
.item3 { grid-column: 1; grid-row: 2; }

3.3 谨慎使用 grid-auto-flow: dense

默认使用标准的自动流（row或column）布局，除非确有必要，否则避免启用 dense 模式。密集模式可能导致自动填充时将项目插入错误位置。

.container {grid-auto-flow: row; /* 避免使用dense，除非经过充分测试 */
}

3.4 设置合适的间距

使用 gap（或 grid-gap）属性，为网格项设置行间距和列间距，确保元素之间有足够的分隔空间，从而减少重叠风险。

.container {gap: 1rem;
}

3.5 控制内容尺寸

确保网格项内部内容不会超出预定区域，可以使用 minmax() 定义行或列的最小和最大尺寸，并配合 overflow 属性控制溢出内容。

.item {min-width: 0;overflow: hidden;
}

3.6 定期检查和调试

使用浏览器开发者工具（如Chrome DevTools），检查网格线和网格项的实际位置，确认所有项目均按预期排列，及时调整错误定位的规则。

4. 实例分析

假设有一个包含头部、侧边栏、主内容和底部的三栏布局，错误配置可能导致侧边栏和主内容重叠。通过以下方式解决重叠问题：

HTML结构：

<div class="grid-container"><header>Header</header><aside>Sidebar</aside><main>Main Content</main><footer>Footer</footer>
</div>

CSS配置：

.grid-container {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: auto;grid-template-areas:"header header header""sidebar main main""footer footer footer";gap: 1rem;
}header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

这样，通过明确的区域划分和适当的间距设置，即使页面内容不均，所有网格项也能各占一方，避免重叠。

5. 总结

避免CSS Grid布局中元素重叠的关键在于：

  • 明确网格规划：使用 grid-template-areas 或显式定位（grid-column/grid-row）确保每个项目占据独立区域。
  • 谨慎自动布局：避免不必要使用 grid-auto-flow: dense，以免自动填充时造成冲突。
  • 设置间距与尺寸：利用 gap、minmax() 等属性为元素留出足够空间，并控制内容尺寸。
  • 定期调试：通过浏览器开发工具检查布局，确保实际效果符合预期。

相关文章：

使用CSS Grid布局时，如何避免元素重叠？

使用CSS Grid布局时&#xff0c;如何避免元素重叠&#xff1f; 文章目录 使用CSS Grid布局时&#xff0c;如何避免元素重叠&#xff1f;1. 引言2. 元素重叠的常见原因2.1 显式定位错误2.2 使用 grid-auto-flow: dense2.3 网格区域定义不明确2.4 内容尺寸超出预期 3. 解决策略3.…...

编程日记 2025/8/27 15:51:02

ALG(Alloy+Loki+Grafana)轻量级日志系统

ALG(AlloyLokiGrafana)轻量级日志系统 前提要求 GrafanaMinioNginxPrometheus Grafana日志收集系统旧版是PLG(ProtailLokiGrafana), Protail收集日志, Loki存储, Grafana展示, 后续的Protail不维护了, Grafana推出了Alloy代替Pritial, 除了收集日志外, 还集成管理Prometheus各种…...

编程日记 2025/8/27 8:28:14

Golang的网络流量控制

# Golang的网络流量控制 什么是网络流量控制&#xff1f; 网络流量控制是指针对网络数据传输过程中的流量进行管理和调控的一种技术手段。通过网络流量控制&#xff0c;我们可以对网络中的数据传输速率、带宽使用情况、数据包丢失率等进行监控和调整&#xff0c;以达到优化网络…...

编程日记 2025/8/27 9:10:22

MRI学习笔记-Meta分析之SDM-PSI

软件介绍 软件下载&#xff1a;https://www.sdmproject.com/software/ 软件教程&#xff1a; https://zhoubolin.netlify.app/posts/sdm-psi/sdm-psi Meta-analysis of Voxel-Based Neuroimaging Studies using Seed-based d Mapping with Permutation of Subject Images (…...

编程日记 2025/8/27 14:25:07

Spring Boot 项目中 Redis 常见问题及解决方案

目录 缓存穿透缓存雪崩缓存击穿Redis 连接池耗尽Redis 序列化问题总结 1. 缓存穿透 问题描述 缓存穿透是指查询一个不存在的数据&#xff0c;由于缓存中没有该数据&#xff0c;请求会直接打到数据库上&#xff0c;导致数据库压力过大。 解决方案 缓存空值&#xff1a;即使…...

编程日记 2025/8/27 7:13:01

3-9 WPS JS宏单元格复制、重定位应用(拆分单表到多表)

************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...

编程日记 2025/8/27 20:37:10

Java集合面试篇

目录 1.概念 1.1.数组与集合的区别&#xff0c;用过哪些&#xff1f; 1.2.说说Java中的集合&#xff1f; 1.3.Java中的线程安全的集合是什么&#xff1f; 1.4.集合遍历的方法有哪些&#xff1f; 2.List 2.1.list可以一边遍历一边修改元素吗&#xff1f; 2.2.Arraylist和…...

编程日记 2025/8/27 7:48:11

C++入门——命名空间

C入门——命名空间 本期内容&#xff0c;我们正式进入C专栏。前几期内容中&#xff0c;我们用C语言实现了一些数据结构&#xff0c;包括顺序表&#xff0c;单链表&#xff0c;双向循环链表&#xff0c;栈和队列等等&#xff0c;为C的学习打下了基础。从现在开始&#xff0c;让…...

编程日记 2025/8/27 5:58:57

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例3: 行选择

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…...

编程日记 2025/8/27 22:14:14

pytest结合allure

Allure 一、文档二、指令三、装饰器3.1 allure.step装饰器3.2 allure.description装饰器3.3 allure.title装饰器3.4 allure.link、allure.issue 和 allure.testcase装饰器3.5 allure.epic、allure.feature 和 allure.story装饰器3.6 allure.severity装饰器 一、文档 allure文档…...

编程日记 2025/8/27 6:07:55

C++入门基础

文章目录 C核心特性详解&#xff08;基础增强版&#xff09;一、第一个C程序&#xff1a;Hello World完整代码解析新手常见问题 二、命名空间&#xff08;详解版&#xff09;1. 为什么需要命名空间&#xff1f;2. 命名空间使用场景3. 嵌套命名空间4. 匿名命名空间 三、输入输出…...

编程日记 2025/8/27 9:09:26

《大语言模型的原理发展与应用》：此文为AI自动生成

《大语言模型的原理发展与应用》&#xff1a;此文为AI自动生成 一、引言&#xff1a;大语言模型&#xff0c;AI 时代的 “新引擎” 在当今数字化浪潮中&#xff0c;大语言模型宛如一颗璀璨的明星&#xff0c;照亮了人工智能发展的道路&#xff0c;成为推动各领域变革的核心驱…...

编程日记 2025/8/27 2:56:39

SpringCloud系列教程（十三）：Sentinel流量控制

SpringCloud中的注册、发现、网关、服务调用都已经完成了&#xff0c;现在就剩下最后一部分&#xff0c;就是关于网络控制。SpringCloud Alibaba这一套中间件做的非常好&#xff0c;把平时常用的功能都集成进来了&#xff0c;而且非常简单高效。我们下一步就完成最后一块拼图Se…...

编程日记 2025/8/27 15:42:27

[MySQL初阶]MySQL（4）基本查询

标题&#xff1a;[MySQL初阶]MySQL&#xff08;4&#xff09;基本查询 水墨不写bug 文章目录 一. 数据表设计二、对数据表的操作1. Create 操作&#xff08;插入数据&#xff09;查看最近受影响的行数&#xff1a; 2. Retrieve 操作&#xff08;读取数据&#xff09;&#xff0…...

编程日记 2025/8/28 0:05:29

使用Open WebUI下载的模型文件(Model)默认存放在哪里？

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Ollama部署LLM专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年2月21日21点21分 &#x1f004;️文章质量&#xff1a;95分 文章目录 使用CMD安装存放位置 默认存放路径 Open WebUI下…...

编程日记 2025/8/27 8:18:13

Maven 私服的搭建与使用（一）

一、引言 在 Java 项目开发中&#xff0c;Maven 作为强大的项目管理和构建工具&#xff0c;极大地提高了开发效率&#xff0c;而 Maven 私服在开发过程中也扮演着至关重要的角色。私服是一种特殊的远程仓库&#xff0c;架设在局域网内&#xff0c;代理广域网上的远程仓库&…...

编程日记 2025/8/27 13:25:46

java每日精进 3.06 【多数据源】

数据库连接池&#xff08;Database Connection Pool&#xff09; 基本信息 是一种用于管理数据库连接的技术。它通过预先创建一定数量的数据库连接&#xff0c;并将其缓存在池中&#xff0c;供多个客户端或应用程序使用&#xff0c;从而减少了每次请求时连接数据库的开销。 …...

编程日记 2025/8/27 13:35:51

Leetcode 3469. Find Minimum Cost to Remove Array Elements

Leetcode 3469. Find Minimum Cost to Remove Array Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3469. Find Minimum Cost to Remove Array Elements 1. 解题思路 这一题我没啥特别好的思路&#xff0c;就只能动态规划了&#xff0c;倒是也能过&#xff0c;不过总…...

编程日记 2025/8/27 2:51:40

多线程-CompletableFuture

简介 CompletableFuture&#xff1a;异步任务编排工具。java 8中引入的一个类&#xff0c;位于juc包下&#xff0c;是Future的增强版。它可以让用户更好地构建和组合异步任务&#xff0c;避免回调地狱。 在CompletableFuture中&#xff0c;如果用户没有指定执行异步任务时的线…...

编程日记 2025/8/27 8:13:14

常用限流算法解析与实现

‌一、固定窗口计数器法‌ ‌原理‌&#xff1a;在固定时间窗口&#xff08;如1秒&#xff09;内统计请求次数&#xff0c;超过阈值则触发限流。 ‌Java实现‌&#xff1a; public class FixedWindowCounter { private static final long WINDOW_MS 1000; // 1秒窗口 priv…...

编程日记 2025/8/27 19:31:26

Swift系列02-Swift 数据类型系统与内存模型

Swift 是一门现代的、安全的编程语言&#xff0c;其类型系统和内存模型设计对性能和安全性有着重要影响。本文将深入探讨 Swift 的数据类型系统与内存模型&#xff0c;帮助你更好地理解并利用这些特性来优化你的 iOS 应用。本文主要包含&#xff1a; 值类型和引用类型&#xf…...

编程日记 2025/8/28 1:59:48

如何不重启，生效windows环境变量

场景 使用php 进行composer 时&#xff0c;composer 要求php7.2以上&#xff0c;我常用的是7.1&#xff0c;不想来回修改&#xff0c;还是重启电脑 临时修改 打印当前环境变量 echo %PATH%临时修改当前环境变量&#xff08;如果需要指定的值&#xff0c;可将全部复制出来&a…...

编程日记 2025/8/27 18:01:02

Ubuntu20.04本地配置IsaacLab 4.2.0的G1训练环境（二）：训练与推理

Ubuntu20.04本地配置IsaacLab4 4.2.0的G1训练环境&#xff08;二&#xff09;&#xff1a;训练与推理 训练推理 写在前面&#xff0c;本文档的实现需要IsaacLab的成功安装&#xff0c;可参考&#xff08;一&#xff09;。 训练 在IsaacLab目录下&#xff0c;isaaclab的conda虚…...

编程日记 2025/8/27 9:06:05

设计模式说明

23种设计模式说明 以下是常见的 23 种设计模式 分类及其核心思想、应用场景和简单代码示例&#xff0c;帮助你在实际开发中灵活运用&#xff1a; 一、创建型模式&#xff08;5种&#xff09; 解决对象创建问题&#xff0c;降低对象耦合。 1. 单例模式&#xff08;Singleton&…...

编程日记 2025/8/27 22:10:51

K8s 1.27.1 实战系列（四）验证集群及应用部署测试

一、验证集群可用性 1、检查节点 kubectl get nodes ------------------------------------------------------ NAME STATUS ROLES AGE VERSION k8s-master Ready control-plane 3h48m v1.27.1 k8s-node1 Ready <none> …...

编程日记 2025/8/27 7:45:47

Artec Leo+Ray II 三维扫描仪成功为VR展数字化30吨重设备-沪敖3D

挑战&#xff1a;在贸易展上展示重达30吨的机械设备&#xff0c;同时克服设备搬运和展示的难题&#xff0c;减轻物流负担。。 解决方案&#xff1a;Artec Leo、Artec Ray II、Artec Studio、Blender、Unity、Microsoft HoloLens、HTC VIVE PRO 效果&#xff1a;在虚拟展厅中&am…...

编程日记 2025/8/27 11:14:13

Redis 各数据类型使用场景详解

1. 字符串&#xff08;String&#xff09; 场景 1&#xff1a;计数器&#xff08;如文章阅读量&#xff09; 问题&#xff1a; 高并发下对同一数值进行增减操作时&#xff0c;需保证原子性&#xff0c;避免竞态条件导致数据不一致。 频繁读写可能成为性能瓶颈。 解决方案&a…...

编程日记 2025/8/27 23:46:47

spark写数据库用连接池找不到driver类

最近遇到一个很离谱的bug&#xff0c;在写spark代码把数据写到mysql的时候考虑到连接的开销&#xff0c;所以用了HikariCP连接池&#xff0c;但是无语的是程序执行死活加载不到mysql的Driver类&#xff0c;但是解压了jar看到mysql-conn包就在lib下面&#xff0c;版本也是5.x的没…...

编程日记 2025/8/27 9:35:41

上传文件到对象存储是选择前端还是后端

对于云上对象存储的上传方式选择&#xff08;前端直传或后端代理上传&#xff09;&#xff0c;需综合考虑安全性、性能、成本、业务需求等因素。 1. 推荐前端直传的场景 适用条件&#xff1a; 大文件上传&#xff08;如视频、大型数据集&#xff09;高并发场景&#xff08;如…...

编程日记 2025/8/27 11:09:56

NanoMQ ds笔记250306

NanoMQ多版本下载地址 https://www.emqx.com/zh/downloads/nanomq NanoMQ官方文档 https://nanomq.io/docs/zh/latest/ NanoMQ 是一个专为物联网边缘计算设计的轻量级、高性能 MQTT 消息代理&#xff08;Message Broker&#xff09;&#xff0c;由中国的开源物联网公司 EMQ 开…...

编程日记 2025/8/27 9:59:51

sqlmap：从基础用法到漏洞利用实战

1. sqlmap基础认知 sqlmap是一款开源的渗透测试工具&#xff0c;能自动检测和利用SQL注入漏洞&#xff0c;支持MySQL、Oracle、PostgreSQL等多种数据库管理系统。其设计旨在简化SQL注入检测流程&#xff0c;助力安全人员在复杂网络环境中快速定位与评估漏洞风险。它通过发送精…...

编程日记 2025/8/27 14:21:22

DFS学习笔记

题目描述 X 国王有一个地宫宝库。是 nm 个格子的矩阵。每个格子放一件宝贝。每个宝贝贴着价值标签。 地宫的入口在左上角&#xff0c;出口在右下角。 小明被带到地宫的入口&#xff0c;国王要求他只能向右或向下行走。 走过某个格子时&#xff0c;如果那个格子中的宝贝价值…...

编程日记 2025/8/28 2:11:06

C++ STL string容器全解析

一、引言 在 C 编程的广阔领域中&#xff0c;字符串处理是一项极为基础且频繁的操作。从简单的文本解析&#xff0c;到复杂的文件读取与处理&#xff0c;字符串几乎无处不在。而 C 中的 string 容器&#xff0c;就像是一把瑞士军刀&#xff0c;为我们处理字符串提供了强大而便…...

编程日记 2025/8/27 4:56:59

React基础之项目创建

项目创建 create-react-app 项目名(小写) 运行 pnpm run start 在React中&#xff0c;使用的语法格式是jsx&#xff0c;也就是js与html相结合的形式 import logo from ./logo.svg; import ./App.css; function App() { return ( <div className"App"> <head…...

编程日记 2025/8/27 16:48:18

迷你世界脚本道具接口：Item

道具接口&#xff1a;Item 彼得兔 更新时间: 2023-04-26 10:26:18 继承自 Actor 具体函数名及描述如下: 序号 函数名 函数描述 1 getItemName(...) 获取道具名称 2 getItemId(...) 获取actor对应的道具ID&#xff0c;如球类等 3 getDropItemNum(...) …...

编程日记 2025/8/27 13:21:30

Unity摄像机跟随物体

功能描述 实现摄像机跟随物体&#xff0c;并使物体始终保持在画面中心位置。 实现步骤 创建脚本&#xff1a;在Unity中创建一个新的C#脚本&#xff0c;命名为CameraFollow。 代码如下&#xff1a; using UnityEngine;public class CameraFollow : MonoBehaviour {public Tran…...

编程日记 2025/8/27 15:34:00

计算机毕业设计SpringBoot+Vue.js青年公寓服务平台(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/8/28 2:02:40

vue实现日历签到效果

在工作任务进行时&#xff0c;有一个签到日历的功能需求要实现&#xff0c;经过文档查询和样式优化实现了需求&#xff0c;在此记录一下。 技术背景&#xff1a;vue2vant(样式控件&#xff09; less 一个公共样式文件 html实现部分&#xff1a; <div class"calenderB…...

编程日记 2025/8/27 3:03:32

(十 八)趣学设计模式 之 观察者模式！

目录 一、 啥是观察者模式&#xff1f;二、 为什么要用观察者模式&#xff1f;三、 观察者模式的实现方式四、 观察者模式的优缺点五、 观察者模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;…...

编程日记 2025/8/27 23:40:47

笔记:在Git中.gitmodules文件的功能和作用和如何使用

一、目的&#xff1a;简单介绍下在Git中.gitmodules文件的功能和作用已经 .gitmodules 文件是 Git 子模块&#xff08;submodule&#xff09;功能的一部分&#xff0c;用于管理和配置子模块。子模块允许一个 Git 仓库包含另一个 Git 仓库作为其子目录&#xff0c;这对于管理依赖…...

编程日记 2025/8/27 3:00:22

Swift 常量

Swift 常量 引言 Swift 是一种由苹果公司开发的编程语言，主要用于 iOS、macOS、watchOS 和 tvOS 等平台的应用开发。在 Swift 中，常量是一种不可变的变量，它用于存储固定不变的值。了解和使用常量是 Swift 编程的基础，本文将详细介绍 Swift 常量的概念、类型、声明以及使…...

编程日记 2025/8/28 1:59:46

Ubuntu20.04双系统安装及软件安装（七）：Anaconda3

Ubuntu20.04双系统安装及软件安装&#xff08;七&#xff09;&#xff1a;Anaconda3 打开Anaconda官网&#xff0c;在右侧处填写邮箱&#xff08;要真实有效&#xff01;&#xff09;&#xff0c;然后Submit。会出现如图示的Success界面。 进入填写的邮箱&#xff0c;有一封Ana…...

编程日记 2025/8/27 6:38:17

Google AI概览升级，AI模式全新登场！

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2025/8/28 1:56:47

【智能体架构：Agent】LangChain智能体类型ReAct、Self-ASK的区别

1. 什么是智能体 将大语言模型作为一个推理引擎。给定一个任务&#xff0c; 智能体自动生成完成任务所需步骤&#xff0c; 执行相应动作&#xff08;例如选择并调用工具&#xff09;&#xff0c; 直到任务完成。 2. 先定义工具&#xff1a;Tools 可以是一个函数或三方 API也…...

编程日记 2025/8/28 1:56:47

nginx 配置403页面(已亲测)

问题&#xff1a;GET请求访问漏洞url即可看到泄露的内网ip 解决方式&#xff1a; 1.配置nginx 不显示真实Ip 2.限制接口只能是POST请求 具体配置&#xff1a; 编写一个403.html 在nginx的配置文件中&#xff0c;配置location参数&#xff1a; location /api/validationCode…...

编程日记 2025/8/28 1:56:46

安卓基础组件Looper - 02 native层面的剖析

文章目录 native使用使用总结创建Looper构造函数创建(不推荐)使用举例源代码 Looper::prepare 获取Looper可忽略初始化Looper主动休眠 pollAll主动唤醒 wake 发送消息 sendMessage轮询消息 native使用 Android Native Looper 机制 - 掘金 (juejin.cn) /system/core/libutils/…...

编程日记 2025/8/27 20:51:37

nodejs关于后端服务开发的探究

前提 在当前的环境中关于web server的主流开发基本上都是java、php之类的&#xff0c;其中java spring系列基本上占了大头&#xff0c;而python之流也在奋起直追&#xff0c;但别忘了nodejs也是可以做这个服务的&#xff0c;只是位置有点尴尬&#xff0c;现在就来探究下nodejs…...

编程日记 2025/8/28 2:11:49

QTday4

1:是进度条通过线程自己动起来 mythread.h #ifndef MYTHREAD_H #define MYTHREAD_H #include <QThread>class mythread : public QThread {Q_OBJECT public:mythread(QObject* parent nullptr); protected:virtual void run() override; private: signals:virtual voi…...

编程日记 2025/8/28 2:15:04

服务器时间同步

方法一 [rootbogon hwh-ansible]# cat time-sync.sh #!/bin/bash # NTP 服务器信息 NTP_SERVER"192.168.42.12" PASSWORD"123456" # 多个 IP 地址 HOSTS("192.168.42.8" "192.168.42.9" "192.168.42.10" "192.168.42…...

编程日记 2025/8/28 2:13:12

蓝桥杯备赛日记【day1】（c++赛道）

一、裁纸刀问题&#xff08;2022、规律、思维、省赛&#xff09; 解法思路&#xff1a; 参考题目给出的例子发现。不管要裁剪多少次。最外围的四次是固定的。然后通过观察发现&#xff0c;我们的行的裁剪次数为&#xff08;m-1&#xff09; 次&#xff0c;而每行都需要裁剪列数…...

编程日记 2025/8/28 2:13:26