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

元素居中的方法总结

news 文章来源：https://blog.csdn.net/weixin_42173016/article/details/132571049 2024/9/17 9:52:28

目录

垂直居中

行内元素垂直居中

单行文本垂直居中

1.line-height: 200px;

多行文本垂直居中

1.table+vertical-align:middle

块级元素垂直居中

1.display: flex;align-items: center;

2.使用position + top +margin-top

水平居中

行内元素水平居中

1.text-align:center

​编辑

块级元素水平居中

1.margin: 0 auto;

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

块级元素垂直水平居中

1.position+transform

 2.flexbox

垂直居中

行内元素垂直居中

单行文本垂直居中

1.line-height: 200px;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;}span{line-height: 200px;}</style></head><body><div><span> 垂直居中!</span></div></body>
</html>

多行文本垂直居中

1.table+vertical-align:middle

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;display: table;}span{display: table-cell;vertical-align: middle;}</style></head><body><div><span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span></div></body>
</html>

2.flex+align-items

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;display: flex;align-items: center;}</style></head><body><div><span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span></div></body>
</html>

块级元素垂直居中

1.display: flex;align-items: center;

不是所有的浏览器都可以兼容

2.使用position + top +margin-top

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.out{width: 500px;height: 500px;background-color: skyblue;	position: relative;			}.in{width: 100px;height: 100px;background-color: salmon;position: absolute;top: 50%;margin-top: -50px;}</style></head><body><div class="out"><div class="in"></div></div></body>
</html>

兼容性较好

让一个块级元素垂直居中的八种方法_块元素垂直居中__张张张i的博客-CSDN博客

水平居中

行内元素水平居中

1.text-align:center

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>.parent {text-align: center;}
</style>
</head>
<body><div class='parent'><span>123</span></div>
</body>
</html>

块级元素水平居中

1.margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.child {background: skyblue;width:200px;height:200px;margin: 0 auto;}</style>
</head>
<body><div class='parent'><div class='child'></div></div>
</body>
</html>

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

文本属性的话，如果你的行内元素是文本，你可以使用line-height和text-align来实现水平和垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>.parent {width: 500px;height: 500px;background-color: aqua;}span{text-align: center;line-height: 500px;}
</style>
</head>
<body><div class='parent'><span>123</span></div>
</body>
</html>

块级元素垂直水平居中

1.position+transform

.container 元素被设置为相对定位，以作为 .content 元素的定位参考。.content 元素被绝对定位到 .container 内，然后使用 top: 50%; left: 50%; 将其移动到容器的中心。最后，transform: translate(-50%, -50%); 用于微调元素的位置，使其完全居中。

<!DOCTYPE html>
<html>
<head>
<style>.container {position: relative;width: 100%;height: 100vh; /* 或者其他适当的高度 */background-color: aqua;
}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
</style>
</head>
<body><div class="container"><div class="content">要居中的内容</div>
</div></body>
</html>

 2.flexbox

<!DOCTYPE html>
<html>
<head>
<style>.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 使容器铺满整个视口高度 */background-color: lightgray;}.content {display: inline-block; /* 将元素设置为行内块元素 */padding: 20px;background-color: white;}
</style>
</head>
<body><div class="container"><div class="content">要居中的内容</div>
</div></body>
</html>

大多数现代浏览器都支持它。然而，如果你需要考虑更旧的浏览器，特别是IE9及更早版本，Flexbox的支持可能会有限

参考文章来自：

元素居中的N种方法 - 掘金

css 水平居中（8种方法）、垂直居中（8种方法） - 掘金 (juejin.cn)

相关文章：

元素居中的方法总结

目录 垂直居中 行内元素垂直居中 单行文本垂直居中 1.line-height: 200px; 多行文本垂直居中 1.tablevertical-align:middle 块级元素垂直居中 1.display: flex;align-items: center; 2.使用position top margin-top 水平居中 行内元素水平居中 1.text-align:cente…...

编程日记 2023/8/31 6:37:17

后端面试话术集锦第一篇：spring面试话术

这是后端面试集锦第一篇博文——spring面试话术❗❗❗ 1. 介绍一下spring 关于spring，我们平时做项目一直都在用，不管是使用ssh还是使用ssm，都可以整合。 Spring主要就三点，也就是核心思想： IOC控制反转 DI依赖注入 AOP切面编程 我先说说IOC吧，IOC就是spring里的控制反…...

编程日记 2023/8/31 6:36:16

elasticsearch8.9.1集群搭建

目录 1.官网文档 2.安装步骤 2.1 环境准备 2.2 添加用户 2.3 修改文件profile文件 2.4 修改elasticsearch.yml 2.5 修改 sysctl.conf 3.启动 3.1 切换到kibana 3.2 启动elasticsearch 3.3 启动kibana 3.4 验证节点情况 1.官网文档 elasticsearch文档&#xff1a;ht…...

编程日记 2023/8/31 6:35:14

前端调用电脑摄像头

项目中需要前端调用&#xff0c;所以做了如下操作 先看一下效果吧 主要是基于vue3&#xff0c;通过canvas把画面转成base64的形式&#xff0c;然后是把base64转成 file文件&#xff0c;最后调用了一下上传接口 以下是代码 进入页面先调用一下摄像头 navigator.mediaDevices.ge…...

编程日记 2023/8/31 6:34:14

网络编程day1——进程间通信-socket套接字

基本特征&#xff1a;socket是一种接口技术&#xff0c;被抽象了一种文件操作&#xff0c;可以让同一计算机中的不同进程之间通信&#xff0c;也可以让不同计算机中的进程之间通信(网络通信) 本地进程间通信编程模型&#xff1a; 进程A …...

编程日记 2023/8/31 6:33:13

Android-关于页面卡顿的排查工具与监测方案

作者&#xff1a;一碗清汤面 前言 关于卡顿这件事已经是老生常谈了&#xff0c;卡顿对于用户来说是敏感的&#xff0c;容易被用户直接感受到的。那么究其原因&#xff0c;卡顿该如何定义&#xff0c;对于卡顿的发生该如何排查问题&#xff0c;当线上用户卡顿时&#xff0c;在线…...

编程日记 2023/8/31 6:32:12

VueX 与Pinia 一篇搞懂

VueX 简介 Vue官方&#xff1a;状态管理工具 状态管理是什么 需要在多个组件中共享的状态、且是响应式的、一个变&#xff0c;全都改变。 例如一些全局要用的的状态信息&#xff1a;用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工…...

编程日记 2023/8/31 6:31:11

指针与空间按钮的交互

文章目录 原理案例&#xff1a;“直线指针”和“点击按钮”的交互1、效果2、步骤 原理 指针不能直接和空间按钮交互&#xff0c;得借助一个中间层——分发器——它分发指针的进入、退出、选择事件&#xff0c;空间按钮自动监听这些事件 案例&#xff1a;“直线指针”和“点击…...

编程日记 2023/8/31 6:30:10

java八股文面试[数据库]——慢查询优化

分析慢查询日志 直接分析慢查询日志&#xff0c; mysql使用explain sql语句进行模拟优化器来执行分析。 oracle使用explain plan for sql语句进行模拟优化器来执行分析。 table | type | possible_keys | key |key_len | ref | rows | Extra EXPLAIN列的解释&#xff1a; ta…...

编程日记 2023/8/31 6:29:09

《Flink学习笔记》——第十章 容错机制

10.1 检查点&#xff08;Checkpoint&#xff09; 为了故障恢复&#xff0c;我们需要把之前某个时间点的所有状态保存下来&#xff0c;这份“存档”就是“检查点” 遇到故障重启的时候&#xff0c;我们可以从检查点中“读档”&#xff0c;恢复出之前的状态&#xff0c;这样就可以…...

编程日记 2023/8/31 6:28:08

【LeetCode-中等题】230. 二叉搜索树中第K小的元素

文章目录 题目方法一&#xff1a;层序遍历 集合排序方法二&#xff1a;中序遍历&#xff08;栈 或者 递归 &#xff09;方法三&#xff08;方法二改进&#xff09;&#xff1a;中序遍历&#xff08;栈 &#xff09; 题目 该题最大的特点就是这个树是二叉树&#xff1a; 所以…...

编程日记 2023/8/31 6:27:07

DQL语句的用法（MySQL）

文章目录 前言一、DQL语句间接和语法1、DQL简介2、DQL语法 二、DQL语句使用1、基础查询&#xff08;1&#xff09;查询多个字段&#xff08;2&#xff09;为字段设置别名&#xff08;3&#xff09;去除重复记录 总结 前言 本文主要介绍SQL语句中DQL语句的功能和使用方法&#…...

编程日记 2023/8/31 6:26:06

【Navicat Premium 16】使用Navicat将excel的数据进行单表的导入，详细操作

业务场景&#xff1a;经常与数据打交道嘛&#xff0c;有的时候会需要将excel的数据导入到数据库中&#xff0c;后面发现对于单表的数据导入&#xff0c;使用Navicat还是非常方便的&#xff0c;仅仅需要将字段关系映射好就可以了 一、开始操作 前提条件&#xff1a;已经成功连接…...

编程日记 2023/8/31 6:25:05

学习笔记230810--vue项目中get请求的两种传参方式

问题描述 今天写了一个对象方式传参的get请求接口方法&#xff0c;发现没有载荷&#xff0c;ip地址也没有带查询字符串&#xff0c;数据也没有响应。 代码展示 错误分析 实际上这里的query是对象方式带参跳转的参数名&#xff0c;而get方法对象方式传参的参数名是parmas 解…...

编程日记 2023/8/31 6:24:03

分享一种针对uni-app相对通用的抓包方案

PART1&#xff0c;前言 近年来混合开发APP逐渐成为主流的开发模式&#xff0c;与传统的开发模式相比混合开发极大的提升了开发效率&#xff0c;同时跨平台的特性也降低了开发成本&#xff0c;一直以来混合开发被诟病的性能问题随着技术的发展也得到改善。技术的发展往往是一把…...

编程日记 2023/8/31 6:23:02

【2023百度之星备赛】码蹄集 BD202301 公园（BFS求最短路）

题目 https://www.matiji.net/exam/brushquestion/1/4347/179CE77A7B772D15A8C00DD8198AAC74?from1 题目大意&#xff1a; 给定一个无向图&#xff0c;有两个人往同一个目的地走&#xff0c;分别消耗体力TE、FE。如果他们到某个点汇合了&#xff0c;然后一起走向目的地&…...

编程日记 2023/8/31 6:22:00

2022年下半年系统架构设计师真题（下午带答案）

试题一 (25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…...

编程日记 2023/8/31 6:20:58

26、ADS瞬时波形仿真-TRANSIENT仿真（以共射放大器为例）

26、ADS瞬时波形仿真-TRANSIENT仿真&#xff08;以共射放大器为例&#xff09; 在本科期间&#xff0c;学习模电的时候总是要对各种三极管电路进行MULTISIM仿真&#xff0c;其实ADS具备相同的功能&#xff0c;而且对于射频电路&#xff0c;使用ADS进行仿真可以结合版图进行&am…...

编程日记 2023/8/31 6:19:57

【微服务部署】02-配置管理

文章目录 1.ConfigMap1.1 创建ConfigMap方式1.2 使用ConfigMap的方式1.3 ConfigMap使用要点建议 2 分布式配置中心解决方案2.1 什么时候选择配置中心2.2 Apollo配置中心系统的能力2.2.1 Apollo创建配置项目2.2.2 项目使用2.2.3 K8s中使用Apollo 1.ConfigMap ConfigMap是K8s提供…...

编程日记 2023/8/31 6:18:55

NTP时钟同步服务器

目录 一、什么是NTP&#xff1f; 二、计算机时间分类 三、NTP如何工作&#xff1f; 四、NTP时钟同步方式&#xff08;linux&#xff09; 五、时间同步实现软件&#xff08;既是客户端软件也是服务端软件&#xff09; 六、chrony时钟同步软件介绍 七、/etc/chrony.conf配置文件介…...

编程日记 2023/8/31 6:17:54

webassembly003 ggml GGML Tensor Library part-2 官方使用说明

https://github.com/ggerganov/whisper.cpp/tree/1.0.3 GGML Tensor Library 官方有一个函数使用说明&#xff0c;但是从初始版本就没修改过 : https://github1s.com/ggerganov/ggml/blob/master/include/ggml/ggml.h#L3-L173 This documentation is still a work in progres…...

编程日记 2023/8/31 6:16:53

ES主集群的优化参考点

因为流量比较大&#xff0c; 导致ES线程数飙高&#xff0c;cpu直往上窜&#xff0c;查询耗时增加&#xff0c;并传导给所有调用方&#xff0c;导致更大范围的延时。如何解决这个问题呢&#xff1f; ES负载不合理&#xff0c;热点问题严重。ES主集群一共有几十个节点&#xff0…...

编程日记 2023/8/31 6:15:51

全国范围内-二手房小区数据-2023-8月更新

收录融合去重多个平台数据&#xff1a;80万&#xff0c;仅供数字参考 数据纬度字段名注释枚举值基础信息id主键id&#xff1a;名称城市来源生成 md5值00001073838501125ec4473463ead9ccname名称瑞祥安文创园address地址(朝阳)双桥路东柳村口南口lng经度116.581903lat纬度39.89…...

编程日记 2023/8/31 6:14:50

第4章 循环变换

4.1 适配体系结构特征的关键技术 由于高级语言隐藏了底层硬件体系结构的大量细节&#xff0c;如果不经过优化直接将高级程序设计语言编写的程序部署在底层硬件上&#xff0c;往往无法充分利用底层硬件体系结构的处理能力。 算子融合不仅可以提…...

编程日记 2023/8/31 6:13:48

spring cloud使用git作为配置中心，git开启了双因子认证，如何写本地配置文件

问题 spring cloud使用git作为配置中心&#xff0c;git开启了双因子认证&#xff0c;死活认证不成功&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 报错关键字 org.eclipse.jgit.api.errors.TransportException: https://git.qualink.com/zhaoxin15/sc-confi…...

编程日记 2023/8/31 6:12:47

JVM内存管理、内存分区：堆、方法区、虚拟机栈、本地方法栈、程序计数器

内存管理 内存分区 线程共享 堆 存放实例&#xff0c;字符串常量&#xff08;直接引用&#xff09;&#xff0c;静态变量&#xff0c;线程分配缓冲区&#xff08;TLAB线程私有&#xff09;。垃圾收集器管理的区域 方法区 非堆&#xff0c;和堆相对的概念。存储已被虚拟机加载的…...

编程日记 2023/8/31 6:11:47

L1-047 装睡(Python实现) 测试点全过

题目 你永远叫不醒一个装睡的人 —— 但是通过分析一个人的呼吸频率和脉搏&#xff0c;你可以发现谁在装睡&#xff01;医生告诉我们&#xff0c;正常人睡眠时的呼吸频率是每分钟15-20次&#xff0c;脉搏是每分钟50-70次。下面给定一系列人的呼吸频率与脉搏&#xff0c;请你找…...

编程日记 2023/8/31 6:10:46

Mysql优化原理分析

一、存储引擎 1.1 MyISAM 一张表生成三个文件 xxx.frm&#xff1a;存储表结构xxx.MYD&#xff1a;存储表数据xxx.MYI&#xff1a;存储表索引 索引文件和数据文件是分离的&#xff08;非聚集&#xff09; select * from t where t.col1 30; 先去t.MYI文件查找30对应的索引…...

编程日记 2023/8/31 6:09:45

软考高级系统架构设计师系列案例考点专题一：软件架构设计

软考高级系统架构设计师系列案例考点专题一：软件架构设计 一、考点梳理及精讲1.质量属性判断与质量属性效用树2.必备概念3.架构风格对比4.MVC架构5.J2EE架构6.面向服务的架构SOA7.企业服务总线ESB一、考点梳理及精讲 系统架构设计师方面的知识在案例分析中每年必考1～2题，并且…...

编程日记 2023/8/31 6:08:44

css实现垂直上下布局的两种常用方法

例子&#xff1a;将两个<span>元素在<div>内垂直居中放置. 方法一&#xff1a;使用 Flexbox 来实现。 在下面的示例中&#xff0c;我将为 <div> 元素添加样式&#xff0c;使其成为一个 Flex 容器&#xff0c;并使用 Flexbox 属性将其中的两个 <span>…...

编程日记 2023/8/31 6:07:42

【Jetpack】Navigation 导航组件 ⑤ ( NavigationUI 类使用 )

文章目录 一、NavigationUI 类简介二、NavigationUI 类使用流程1、创建 Fragment2、创建 NavigationGraph3、Activity 导入 NavHostFragment4、创建菜单5、Activity 界面开发 NavigationUI 的主要逻辑 ( 重点 )a、添加 Fragment 布局b、处理 Navigation 导航逻辑 ( 重点 )c、启…...

编程日记 2023/8/31 6:06:40

基于NAudio实现简单的音乐播放器

《测试.net开源音频库NAudio》介绍了使用NAudio实现音乐播放和录音的基本用法&#xff0c;本文基于NAudio的音乐播放功能实现简单的mp3音乐播放器程序&#xff0c;主要实现以下功能&#xff1a;   1&#xff09;导入文件夹中的mp3音乐文件&#xff0c;直接导入多个mp3音乐文件…...

编程日记 2023/8/31 6:05:39

C++之“00000001“和“\x00\x00\x00\x01“用法区别(一百八十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…...

编程日记 2023/8/31 6:04:38

Java“魂牵”京东店铺所有商品数据接口，京东店铺所有商品API接口，京东API接口申请指南

要通过京东的API获取店铺所有商品数据&#xff0c;您可以使用京东开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过京东开放平台API获取整店商品数据&#xff1a; 首先&#xff0c;确保您已注册成为京东开放平台的开发者&#xff0c;…...

编程日记 2023/8/31 6:03:36

vuex详细用法

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它可以帮助我们在Vue组件之间共享和管理数据&#xff0c;以及实现更好的代码组织和调试。 在Vue.js中&#xff0c;组件之间的数据通信可以通过props和事件来实现。然而&#xff0c;随着应用程序规模的增长&#xff0c;组件…...

编程日记 2023/8/31 6:02:35

微前端-monorepo-无界

文章目录 前言一、微前端二 、monorepo三 、pnpm硬链接软链接&#xff08;符号链接&#xff09;幽灵依赖依赖安装耗时长monorepo项目搭建子模块复用 四、无界接入无界无界预加载无界传参 总结 前言 本文主要记录微前端框架 无界 的使用与理解以及monorepo代码管理方式。 一、微…...

编程日记 2023/8/31 6:01:34

阿里云矢量图标透明背景转换/展示时变为黑色解决方法

下载了一个矢量图标&#xff0c;背景是透明的 上传到minio然后在前端展示&#xff0c;发现透明&#xff08;白色&#xff09;的地方变成黑色了 处理方法&#xff1a;去除透明的底色。使用window的画图程序打开保存一遍&#xff0c;将透明色转为白色 OK...

编程日记 2023/8/31 6:00:33

Linux之Shell（二）

Linux之Shell 函数系统函数basenamedirname 自定义函数 正则表达式入门常规匹配常用特殊字符 文本处理工具cutawk 综合应用案例归档文件发送消息 函数 系统函数 basename 基本语法 basename [string / pathname] [suffix] 功能描述&#xff1a;basename 命令会删掉所有的前缀…...

编程日记 2023/8/31 5:59:32

以太网POE供电浪涌静电防护推荐TVS二极管

POE是一种传输技术&#xff0c;可在以太网电缆上传输电力和数据。1000M千兆以太网POE供电端口广泛用于安防、视频监控以及智能电网等工业系统&#xff0c;以实现系统内的数据、视频传输、流量控制、以及通过总线实现供电。由于工业以太网工作环境非常严酷苛刻&#xff0c;对于以…...

编程日记 2023/8/31 5:58:30

如何在 JavaScript 中查看结构体数组？

调试 JavaScript 代码的最简单方法是使用许多开发人员使用的 console.log()。有时&#xff0c;我们需要了解数组的结构和存储的值以进行调试。以下介绍如何查看结构数组。 JavaScript 的各种方法允许我们检查数组的结构。例如&#xff0c;我们可以知道数组是否包含对象、嵌套数…...

编程日记 2023/8/31 5:57:29

【SpringBoot学习笔记】02.静态资源与首页订制

静态资源 Spring Boot 通过 MVC 的自动配置类 WebMvcAutoConfiguration 为这些 WebJars 前端资源提供了默认映射规则&#xff0c;部分源码如下。 jar包&#xff1a; JAR 文件就是 Java Archive File&#xff0c;顾名思意&#xff0c;它的应用是与 Java 息息相关的&#xff0c;…...

编程日记 2023/8/31 5:56:28

kotlin 转 Java

今天突然想研究下有些kotlin文件转为Java到底长什么样&#xff0c;好方便优化kotlin代码&#xff0c;搞了半天发现一个非常简单的Android Studio或者Intellij idea官方插件Kotlin&#xff0c;Kotlin是插件的名字&#xff0c;真是醉了&#xff1b; 这里以AS为例&#xff0c;使用…...

编程日记 2023/8/31 5:55:27

【Harmony】在Harmony上面可以使用的Android常用的开源库

序言 Harmony开发中&#xff0c;由于不像Android开发经过这么多年的发展&#xff0c;各种类库都是比较完善的&#xff0c;这就导致在Harmony开发中很多Android类库是不能使用的&#xff0c;但是也有一些是可以使用的&#xff0c;下面是我在Harmony开发中实际开发中可以使用的部…...

编程日记 2023/8/31 5:54:25

数学建模：灰色关联分析

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 灰色关联分析法 算法流程 建立一个m行 n列的矩阵 X X X &#xff0c;其中 m 表示评价对象&#xff0c; n表示评价指标首先进行矩阵的归一化&#xff0c;得到归一化后的矩阵 d a t a data data获取参考向…...

编程日记 2023/8/31 5:53:24

nodepad++ 插件的安装

nodepad 插件的安装 一、插件安装二、安装插件&#xff1a;Json Viewer nodepad 有 插件管理功能&#xff0c;其中有格式化json以及可以将json作为树查看的插件&#xff1a; Json Viewer 一、插件安装 1、首先下载最新的notepad 64位【https://notepad-plus.en.softonic.com…...

编程日记 2023/8/31 5:52:23

学习分享：Ubuntu 下使用 Qt 打开串口报错 Permission denied

Ubuntu 下使用 Qt 打开串口报错 Permission denied 错误描述 提前声明一下&#xff0c;开发环境是 Ubuntu18.04&#xff0c;用户是非 root 用户。 因项目需求&#xff0c;需要使用到 Qt 收发串口数据&#xff0c;曾经写过一个串口调试助手的程序 通俗易懂玩QT&#xff1a;串口…...

编程日记 2023/8/31 5:51:22

Javaweb入门

Spring Spring发展到今天已经形成一种开发生态圈&#xff0c;Spring提供若干个子项目&#xff0c;每个项目用于完成特定的功能。 Spring Boot可以帮助我们非常快速的构建应用程序、简化开发、提高效率 SpringBootWeb入门 需求&#xff1a;使用Spring Boot开发一个web应用&a…...

编程日记 2023/8/31 5:50:21

后端开发基础概念

后端开发基础概念 目前处于项目上手阶段&#xff0c;在学习项目过程中&#xff0c;有一些一知半解或者不明白含义的专业名词或者缩写&#xff0c;在此汇总。里面的内容很多都是基于个人理解&#xff0c;水平有限如果有出错的地方还请各位大佬批评指正。 2023年8月31日00:34:22…...

编程日记 2023/8/31 5:49:20

ELK原理和介绍

为什么用到ELK&#xff1a; 一般我们需要进行日志分析场景&#xff1a;直接在日志文件中 grep、awk 就可以获得自己想要的信息。但在规模较大的场景中&#xff0c;此方法效率低下&#xff0c;面临问题包括日志量太大如何归档、文本搜索太慢怎么办、如何多维度查询。需要集中化…...

编程日记 2023/8/31 5:48:19

FBX SDK 开发环境配置 visual studio 2022

FBX | Adaptable File Formats for 3D Animation Software | Autodesk. 下载windows的sdk并安装. 创建一个c console 工程 设置include目录 添加预处理宏 FBX_SHARED1 添加fbx sdk lib 目录 添加依赖lib : libfbxsdk-md.lib libxml2-md.lib zlib-md.lib 配置完毕....

编程日记 2023/8/31 5:47:18