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

前端【3】--CSS布局，CSS实现横向布局，盒子模型

news 来源：原创 2025/6/10 1:53:59

盒子分类

1、块级盒子

2、内联级盒子

3、内联块级盒子

4、弹性盒子 

5、盒子内部分区

方法一：使用 float 普通盒子实现横向布局

方法二：使用 display: inline-block 内联块级元素实现横向布局

方法三：使用弹性盒子 flexbox（推荐）

1、父级属性：

 2、子级属性：

示例：

往期文章：

前端【2】html添加样式、CSS选择器-CSDN博客

盒子分类

1、块级盒子

块级元素布局：块级元素的特性，独占一行，竖向排列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块级元素</title><style>div {width: 200px;height: 100px;background-color: aquamarine;margin: 10px 0; /* 上下间距 */}</style>
</head>
<body><!-- 块级元素：独占一行,竖着布局对宽度高度支持 display:block --><div>块级元素 1</div><div>块级元素 2</div><p>段落文本</p><h1>标题</h1>
</body>
</html>

常见块级标签：div、p、h、ul、ol、li 

2、内联级盒子

内联元素的特性：不独占一行，对宽高不支持，行内元素连续排列。

<body>
<!-- 内联级元素 不独占一行 对宽度高度不支持 display: inline --><span>内联元素 1</span><span>内联元素 2</span><a href="#">超链接</a>
</body>

常见的有span、a、img、 

3、内联块级盒子

内联块级元素的特性：不独占一行，但支持宽高设置，连续排列。 

 <!-- 内联块级级元素 不独占一行 对宽度高度支持 display:inline-block --><img src="material/蒲公英.png" alt=""><img src="material/蒲公英.png" alt=""><img src="material/蒲公英.png" alt="">

4、弹性盒子 

弹性盒子（Flexbox）的特性：子元素默认横向排列，可灵活控制布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性盒子</title><style>.container {display: flex; /* 弹性盒子 */width: 600px;height: 200px;background-color: yellow;justify-content: space-between; /* 子元素之间平均分布 */align-items: center; /* 垂直方向居中 */}.container div {width: 150px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="container"><div>子元素 1</div><div>子元素 2</div><div>子元素 3</div></div>
</body>
</html>

5、盒子内部分区

CSS页面布局（超详解）_css布局-CSDN博客----推荐博客~~

每个元素的盒子由以下四个部分组成：

1. 内容区 (Content)

  • 元素的实际内容（如文字、图片等）所在的区域。
  • 它的大小由 width 和 height 属性决定。

2. 内边距 (Padding)

  • 内容与边框之间的距离。
  • 使用 padding 属性设置，可以单独设置上下左右的内边距。

3. 边框 (Border)

  • 环绕内容区和内边距的边界。
  • 使用 border 属性设置，定义边框的宽度、样式和颜色。

4. 外边距 (Margin)

  • 元素与其他元素之间的距离。
  • 使用 margin 属性设置，可以单独设置上下左右的外边距。

这里放一张名图：

 浏览器默认给外边距和内边距设置一定的初值，可以对margin和padding的值来改变其样式，其代码如下:

*{              /*通用选择器，选择所有元素*/margin:0;  /*外边距清0*/padding:0; /*内边距清0*/
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型示例</title><style>.box {width: 200px;                /* 内容区宽度 */height: 100px;               /* 内容区高度 */background-color: lightblue; /* 内容区背景色 */padding: 20px;               /* 内边距 */border: 10px solid blue;     /* 边框 */margin: 30px auto;           /* 外边距：上下30px，左右居中 */}body {background-color: #f5f5f5;   /* 页面背景色 */}</style>
</head>
<body><div class="box">内容区</div>
</body>
</html>

 

在前端布局开发中，我们经常需要对元素进行横向布局。实现横向布局的方法有很多，从传统的 float 到现代的 flexbox，每种方式都有其特点和适用场景。本文将对三种常见方法进行详细介绍，分析它们的优缺点，并推荐最佳实践。

方法一：使用 float 普通盒子实现横向布局

通过为子元素设置 float 属性可以实现横向布局：

  • float: left; 子元素左浮动。
  • float: right; 子元素右浮动

存在的问题：父级元素高度坍塌：使用 float 后，父级元素的高度不会被子元素撑开，可能导致后续元素向上移动。

解决方法

  1. 设置父级高度：手动为父级元素设置固定高度，如 height: 150px;。但固定高度难以灵活适配内容。
  2. 清除浮动：
    • 给父级元素添加 overflow: hidden;，使父级高度随子级内容变化。

无法解决的问题：

1、子级元素均分 父级元素需要计算设置宽度 ，但不一定能均分

2、子级元素想要在父级元素内均匀分布需要计算设置 margin，但不一定能均匀分布

3、书写比较繁琐，代码冗余

方法二：使用 display: inline-block 内联块级元素实现横向布局

将子元素设置为 inline-block，让其表现为块状元素，同时可以像文本一样在一行内排列。

存在的问题：空白间隙--inline-block 布局的子元素之间若存在换行符，会被浏览器解析为空白符，导致子元素之间有多余间隙。

解决方法

  1. 移除换行符：将子元素标签紧贴书写。 
    <div class="parent"><div class="child"></div><div class="child"></div></div>
  2. 设置 font-size 为 0：在父级元素上设置 font-size: 0;，清除空白符影响。

无法解决的问题：

1、子级元素均分 父级元素需要计算设置宽度 ，但不一定能均分

 2、子级元素想要在父级元素内均匀分布需要计算设置 margin，但不一定能均匀分布

 3、书写比较繁琐，代码冗余

方法三：使用弹性盒子 flexbox（推荐）

  flexbox 是一种强大且灵活的现代布局方式，通过为父级元素设置 display: flex，即可实现横向布局，且能够轻松解决 float 和 inline-block 布局中的许多问题。 

1、父级属性：

  • flex-direction：定义子元素排列方向。
    • row：从左到右排列（默认）。
    • row-reverse：从右到左排列。
    • column：纵向从上到下排列。
    • column-reverse：纵向从下到上排列。
  • flex-wrap：定义子元素是否换行。
    • nowrap：不换行（默认）。
    • wrap：自动换行。
  • justify-content：定义子元素在水平方向的分布方式。
    • flex-start：从起点开始排列。（需要结合flex-direction 来看)
    • flex-end：从终点开始排列。
    • center：居中排列。
    • space-between：代表空白元素均匀分布在元素中间-------经常用到
    • space-around：子元素之间及首尾均分空隙。
    • space-evenly：所有间隙（子元素之间及首尾）均等。
  • align-items：定义子元素在垂直方向上的对齐方式。
    • stretch（默认填满）、flex-start（顶端对齐）、flex-end（底部对齐）、center、baseline(基线对齐)。

 2、子级属性：

  • order：设置子元素排列顺序，值越小越靠前。
  • flex（简写属性）：
    • flex-grow：拉伸因子 根据每个属性的拉伸因子采用求和均分按比例将空余i部分分配给每个元素
    • flex-shrink：压缩因子 ,前提是子元素和>父级元素宽/高，原理与grow一致定义子元素在超出父级宽度时的压缩比例。
    • flex-basis：定义子元素的初始尺寸。

示例：

/* 父容器 .top 样式 */
.top {width: 800px; /* 设置父容器宽度 */background-color: palegreen; /* 背景颜色为淡绿色 */display: flex; /* 启用弹性布局 */flex-direction: row; /* 主轴方向为水平方向 */justify-content: space-between; /* 子元素在主轴方向均匀分布 */
}/* 左侧子容器 .left 样式 */
.left {flex-grow: 3; /* 拉伸因子，分配更多剩余空间 */order: 3; /* 排列顺序较低 */background-color: powderblue; /* 背景颜色为淡蓝色 */width: 200px; /* 固定宽度 */height: 100px; /* 固定高度 */
}/* 中间子容器 .middle 样式 */
.middle {flex-grow: 1; /* 拉伸因子，占用较少的剩余空间 */order: 1; /* 排列顺序最高 */background-color: yellow; /* 背景颜色为黄色 */width: 200px; /* 固定宽度 */height: 100px; /* 固定高度 */
}/* 右侧子容器 .right 样式 */
.right {order: 2; /* 排列顺序居中 */background-color: orange; /* 背景颜色为橙色 */width: 200px; /* 固定宽度 */height: 130px; /* 固定高度 */
}/* 底部容器 .bottom 样式 */
.bottom {width: 800px; /* 宽度与父容器一致 */height: 200px; /* 固定高度 */background-color: rgb(168, 51, 70); /* 背景颜色为深红色 */
}

相关文章：

前端【3】--CSS布局，CSS实现横向布局，盒子模型

盒子分类 1、块级盒子 2、内联级盒子 3、内联块级盒子 4、弹性盒子 5、盒子内部分区 方法一&#xff1a;使用 float 普通盒子实现横向布局 方法二&#xff1a;使用 display: inline-block 内联块级元素实现横向布局 方法三&#xff1a;使用弹性盒子 flexbox&#xff0…...

编程日记 2025/6/1 18:32:42

JavaEE

一.web开发概述 1.服务器 解释1&#xff1a;服务器是一款软件&#xff0c;可以向其他发送请求&#xff0c;服务器会做出一个响应。可以在服务器中部署文件&#xff0c;让其他人访问。 解释2&#xff1a;也可以把运行服务器软件的计算机称为服务器 2.安装服务器 Tomcat官方…...

编程日记 2025/6/2 23:22:14

C语言之文本加密程序设计

&#x1f31f; 嗨&#xff0c;我是LucianaiB&#xff01; &#x1f30d; 总有人间一两风&#xff0c;填我十万八千梦。 &#x1f680; 路漫漫其修远兮&#xff0c;吾将上下而求索。 文本加密程序设计 摘要&#xff1a;本文设计了一种文本加密程序&#xff0c;旨在提高信息安…...

编程日记 2025/6/4 12:23:25

Spring-Data-Redis连接模式

Redis可以在各种设置中操作。每个操作模式都需要特定的配置&#xff0c;这些配置将在以下部分中进行解释。 一、Redis 单机模式 最简单的入门方法是将Redis Standalone与单个Redis服务器一起使用&#xff0c; 配置LettuceConnectionFactory或JedisConnectionFactor&#xff0…...

编程日记 2025/6/1 6:42:11

详细介绍下linux内核的高端地址

在32位系统中&#xff0c;内核空间通常占据1GB&#xff0c;用户空间占3GB&#xff0c;这主要是基于历史原因、内存管理需求和系统安全性考虑。 历史原因&#xff1a;早期的UNIX系统就采用了将内核空间和用户空间分离的设计&#xff0c;在32位系统设计时&#xff0c;延续了这种…...

编程日记 2025/6/3 4:14:17

ThinkPhp项目解决静态资源请求的跨域问题的解决思路

背景&#xff1a;我在前端使用vue语言开发的&#xff0c;请求的后端是用ThinkPhp项目开发的。我vue项目里的请求php接口&#xff0c;自带header参数的跨域问题通过网上查询到的server端配置方法已经解决了。我使用的 是中间件的配置方法&#xff1a; <?php//admin 项目 配…...

编程日记 2025/6/3 19:59:27

通过图形界面展现基于本地知识库构建RAG应用

1. 客户需求 快速完成概念验证(PoC)通过图形界面快速完成演示本地私有数据对比不同模型和成本&#xff0c;决定如何部署 2. 阿里云基于本地知识库构建RAG应用 参考方案&#xff1a; 百炼本地知识库方案 解决方案&#xff1a; FastAPI Gradio Llamaindex qwen-plus 主要三大…...

编程日记 2025/6/2 3:02:35

GCPAAS/DashBoard：完全免费的仪表盘设计，基于Vue+ElementUI+G2Plot+Echarts，开源代码，简单易用！还在等什么呢

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 GCPAAS/DashBoard&#xff0c;一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的仪表盘设计器&#xff0c;具备仪表盘目录管理…...

编程日记 2025/6/3 16:27:28

深度学习笔记——循环神经网络RNN

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本文详细介绍面试过程中可能遇到的循环神经网络RNN知识点。 文章目录 文本特征提取的方法1. 基础方法1.1 词袋模型&#xff08;Bag of Words, BOW&#xff09;工作原…...

编程日记 2025/6/3 13:59:16

【Linux系统编程】—— 深度解析进程等待与终止：系统高效运行的关键

文章目录 进程创建再次认识fork()函数fork()函数返回值 写时拷贝fork常规⽤法以及调用失败的原因 进程终⽌进程终止对应的三种情况进程常⻅退出⽅法_exit函数exit函数return退出 进程等待进程等待的必要性进程等待的⽅法 进程创建 再次认识fork()函数 fork函数初识&#xff1…...

编程日记 2025/6/3 13:42:38

EPSANet2021笔记

来源&#xff1a; EPSANet: An Efficient Pyramid Squeeze Attention Block on Convolutional Neural Network 相关工作&#xff1a; #注意力机制 #多尺度特征表示 创新点&#xff1a; 贡献&#xff1a; 建立了长距离通道依赖关系有效获取利用不同尺度特征图的空间信息 问…...

编程日记 2025/6/4 0:12:08

CTTSHOW-WEB入门-信息搜集11-20

web11 1. 题目&#xff1a; 2. 解题步骤及思路&#xff1a;本题的flag已经给出&#xff0c;主要考点是考察域名的查询&#xff0c;通过查询有时候也可以得到一些有用的信息。 3. 相关知识点&#xff1a;查询域名可以使用nslookup命令使用方法如下&#xff1a;&#xff08;windo…...

编程日记 2025/6/2 6:51:40

2025年1月19日（理论力学动静法）

动静法&#xff08;Dynamic-Static Method&#xff09;是理论力学中常用的一种分析方法&#xff0c;用来求解多自由度系统的平衡问题&#xff0c;尤其适用于静力学分析和动力学分析之间的转化。动静法通过引入虚拟的动力学效应&#xff0c;将静力学问题转化为一个动力学问题&am…...

编程日记 2025/6/4 11:03:22

iOS 性能优化：实战案例分享

摘要&#xff1a; 本文将深入探讨 iOS 性能优化的重要性&#xff0c;并通过一系列实际开发案例&#xff0c;展示如何解决常见的性能问题&#xff0c;包括内存管理、CPU 性能、网络性能、UI 性能和启动性能等方面的优化&#xff0c;帮助 iOS 开发者打造更流畅、高效的应用程序。…...

编程日记 2025/6/3 16:38:17

基于本地消息表实现分布式事务

假设我们有一个电商系统,包含订单服务和库存服务。当用户下单时,需要在订单服务中创建订单,同时在库存服务中扣减库存。这是一个典型的分布式事务场景,我们需要保证这两个操作要么都成功,要么都失败,以保证数据的最终一致性。 项目结构: 订单服务(Order Service)库存服务(Inv…...

编程日记 2025/6/2 23:49:12

select函数

系统调用 select()可用于执行 I/O 多路复用操作&#xff0c;调用 select()会一直阻塞&#xff0c;直到某一个或多个文件描述符成为就绪态&#xff08;可以读或写&#xff09;。其函数原型如下所示&#xff1a; #include <sys/select.h> int select(int nfds, fd_set *re…...

编程日记 2025/6/2 22:48:12

自然语言处理——自注意力机制

一、文字表示方法 在自然语言处理中&#xff0c;如何用数据表示文字是基础问题。独热编码&#xff08;One-hot Encoding &#xff09;是一种简单的方法&#xff0c;例如对于 “我”“你”“他”“猫”“狗” 等字&#xff0c;会将其编码为如 “我 [1 0 0 0 0 ……]”“你 [0 …...

编程日记 2025/6/3 10:26:12

C语言初阶--函数

目录 1. 函数是什么&#xff1f; 2. C语言中函数的分类 2.1 库函数 2.2 自定义函数 3. 函数的参数 3.1 实际参数&#xff08;实参&#xff09; 3.2 形式参数&#xff08;形参&#xff09; 4. 函数调用 4.1 传值调用 4.2 传址调用 练习&#xff1a;写一个函数判断一个…...

编程日记 2025/5/31 2:38:33

探索基于机器学习的信用评分：从数据到洞察

友友们好！ 我的新专栏《Python进阶》正式启动啦！这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。 在这个专栏中，你将会找到： ● 深入解析：每一篇文章都将…...

编程日记 2025/6/4 13:54:44

Ubuntu 24.04 LTS 通过 docker desktop 安装 seafile 搭建个人网盘

准备 Ubuntu 24.04 LTSUbuntu 空闲硬盘挂载Ubuntu 安装 Docker Desktop [我的Ubuntu服务器折腾集](https://blog.csdn.net/jh1513/article/details/145222679。 安装 seafile 参考资料 Docker安装 Seafile OnlyOffice 并配置OnlyOffice到Seafile&#xff0c;实现在线编辑…...

编程日记 2025/6/1 19:19:24

【Golang 面试题】每日 3 题（三十六）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

编程日记 2025/6/3 16:18:20

Linux虚拟机安装与FinalShell使用：探索Linux世界的便捷之旅

文章目录 软件准备安装 VMware 虚拟机下载CentOS 光盘镜像文件选择适合的 CentOS 版本选择合适的镜像文件 本教程工具版本 第一部分&#xff1a;安装 Linux 虚拟机1. 启动 VMware 并创建新虚拟机2. 默认硬件兼容性设置3. 安装操作系统的设置4. 选择操作系统类型与版本5. 为虚拟…...

编程日记 2025/6/3 22:13:11

leetcode19-删除链表的第n结点

leetcode 19 思路 要删除倒数第n个元素&#xff0c;那么就要找到倒数第n1个元素&#xff0c;那么我们需要两个指针来记录&#xff0c;首先快指针需要先走n1步&#xff0c;然后快慢指针一起进行移动&#xff0c;直到快指针为null的时候&#xff0c;此时慢指针恰好走到倒数第n…...

编程日记 2025/6/2 19:19:30

多学科视角下探索开源Github、Git初步学习

​ Think 1.Github 作为现今最主流的代码托管平台、协作平台甚至是“社交平台”&#xff0c;本身是闭源的。一方面&#xff0c;它是和大多数开发者连接最紧密的开源阵地&#xff0c;另一方面&#xff0c;拥有传统“黑客精神”的人认为将用户身份绑定这样一个闭源平台上恰恰与…...

编程日记 2025/5/28 18:53:17

新星杯-ESP32智能硬件开发--ESP32的I/O组成-系统中断矩阵

本博文内容导读&#x1f4d5;&#x1f389;&#x1f525; ESP32开发板的中断矩阵、功能描述与实现、相关API和示例程序进行介绍 ESP32中断矩阵将任一外部中断源单独分配到每个CPU的任一外部中断上&#xff0c;提供了强大的灵活性&#xff0c;能适应不同的应用需求。 ESP32中断主…...

编程日记 2025/5/30 8:38:15

Android 右键后无Java class创建

Android studio 创建java class &#xff1a; 最近几个月用Android studio 开发&#xff0c;因为电脑设置了一个新的用户使用&#xff0c;原来的android studio,打开之前的正常的项目总是报一些奇奇怪怪的错误&#xff0c;就重新安装了最新的版本 问题描述 但是新的android s…...

编程日记 2025/6/3 4:54:48

leetcode-买卖股票问题

309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 动态规划解题思路&#xff1a; 1、暴力递归&#xff08;难点如何定义递归函数&#xff09; 2、记忆化搜索-傻缓存法&#xff08;根据暴力递归可变参数确定缓存数组维度&#xff09; 3、严格表结构依…...

编程日记 2025/6/4 1:39:04

如何通过 Apache Airflow 将数据导入 Elasticsearch

作者&#xff1a;来自 Elastic Andre Luiz 了解如何通过 Apache Airflow 将数据导入 Elasticsearch。 Apache Airflow Apache Airflow 是一个旨在创建、安排&#xff08;schedule&#xff09;和监控工作流的平台。它用于编排 ETL&#xff08;Extract-Transform-Load&#xff0…...

编程日记 2025/6/3 22:28:28

LDPC (Low-Density Parity-Check) 码min_sum、n_0、block_length 和 rate参数

1. min_sum 1; min_sum 是与 最小和解码算法&#xff08;Min-Sum Decoding Algorithm&#xff09;相关的参数。最小和解码算法是 LDPC 码的一种常用解码方法&#xff0c;主要通过传递信号的信息在接收端进行解码。此参数表示最小和算法中的缩放因子。 在 LDPC 解码过程中&am…...

编程日记 2025/5/31 6:32:42

基于javaweb的SpringBoot景区旅游管理系统设计和实现(源码+文档+部署讲解）

个人名片 &#x1f525; 源码获取 | 毕设定制| 商务合作&#xff1a;《个人名片》 ⛺️心若有所向往,何惧道阻且长 文章目录 个人名片运行环境技术栈适用功能说明使用说明 运行环境 Java≥8、MySQL≥5.7 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台…...

编程日记 2025/6/2 10:05:45

（二）afsim第三方库编译（qt编译）

注意&#xff1a;源码编译的路径不能有中文否则报错&#xff0c;压缩包必须用官网下载的xz格式解压的才可以&#xff0c;否则sudo ./configure命令找不到 先编译openssl3.1.1软件包&#xff0c;否则编译的qt库将不支持network&#xff0c;相关库的编译(上文&#xff08;一&…...

编程日记 2025/6/4 11:20:28

重学SpringBoot3-Spring Retry实践

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞??收藏评论 重学SpringBoot3-Spring Retry实践 1. 简介2. 环境准备3. 使用方式 3.1 注解方式 基础使用自定义重试策略失败恢复机制重试和失败恢复效果注意事项 3.2 编程式使用3.3 监听重试过程 监…...

编程日记 2025/6/2 2:42:25

极域电子教室破解（JiyuTrainer）

JiyuTrainer下载 byebye极域电脑安装包也可以使用 如果只玩单机游戏最简单的办法就是拔网线 另一种办法安装360卫士通过360卫安全卫士上网设置来进行禁用JiyuTrainer网络跟拔网线一样...

编程日记 2025/6/2 9:39:22

Oracle数据库传统审计怎么用

Oracle数据库传统审计怎么用 审计功能开启与关闭By Session还是By AccessWhenever Successful数据库语句审计数据库对象审计查看审计策略和记录Oracle数据库审计功能分为传统审计（Traditional Auditing）和统一审计（Unified Auditing）。统一审计是从Oracle 12c版本开始引入的…...

编程日记 2025/6/3 13:42:11

windows 搭建flutter环境，开发windows程序

环境安装配置&#xff1a; 下载flutter sdk https://docs.flutter.dev/get-started/install/windows 下载到本地后&#xff0c;随便找个地方解压&#xff0c;然后配置下系统环境变量 编译windows程序本地需要安装vs2019或更新的开发环境 主要就这2步安装后就可以了&#xff0…...

编程日记 2025/6/2 9:12:15

基于SpringBoot的健身房管理系统【源码+文档+部署讲解】

系统介绍 基于SpringBootVue实现的健身房管理系统采用前后端分离架构方式&#xff0c;系统设计了管理员、会员、员工三种角色&#xff0c;系统实现了用户登录与注册、个人中心、会员管理、员工管理、会员卡管理、会员卡类型管理、教练信息管理、解聘管理、健身项目管理、指导项…...

编程日记 2025/6/1 1:31:21

2.slf4j入口

文章目录 一、故事引入二、原理探究三、SLF4JServiceProvider四、总结 一、故事引入 故事要从下面这段代码说起 public class App {private static final Logger logger LoggerFactory.getLogger(App.class);public static void main( String[] args ) throws Exception {lo…...

编程日记 2025/6/4 2:45:39

sql_实用查询语句模版

1. 查询某个字段是否为必填项 SQL 查询模板 SELECT COLUMN_NAME,IS_NULLABLE FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME YourTableNameAND COLUMN_NAME YourColumnName;说明&#xff1a; INFORMATION_SCHEMA.COLUMNS 表包含了所有数据库中表的列信息。IS_NULLABL…...

编程日记 2025/6/2 14:59:01

Nginx反向代理架构介绍

Nginx反向代理架构是一种强大的服务器架构模式&#xff0c;它位于用户和原始服务器之间&#xff0c;接收用户的请求并将其转发到一个或多个后端服务器&#xff0c;然后将从后端服务器获取的响应返回给用户&#xff0c;就好像这些内容都是由代理服务器本身直接提供的一样。以下是…...

编程日记 2025/6/3 16:38:18

Mysql MVCC

MVCC 什么是MVCC MVCC&#xff08;多版本并发控制&#xff0c;Multi-Version Concurrency Control&#xff09; 是一种用于数据库管理系统&#xff08;DBMS&#xff09;中的并发控制机制&#xff0c;它允许多个事务同时执行而不互相阻塞&#xff0c;并通过创建数据的多个版本…...

编程日记 2025/6/4 9:48:20

JavaEE之CAS

上文我们认识了许许多多的锁&#xff0c;此篇我们的CAS就是从上文的锁策略开展的新概念&#xff0c;我们来一探究竟吧 1. 什么是CAS&#xff1f; CAS: 全称Compare and swap&#xff0c;字⾯意思:“比较并交换”&#xff0c;⼀个CAS涉及到以下操作&#xff1a; 我们假设内存中…...

编程日记 2025/6/3 16:37:19

Flink CDC 使用实践以及遇到的问题

背景 最近公司在做一些业务上的架构调整&#xff0c;有一部分是数据从mysql采集到Starrocks&#xff0c;之前的一套方法是走 debezium 到 puslar 到 starrocks,这一套下来比较需要配置很多东西&#xff0c;而且出现问题以后&#xff0c;需要修改很多配置&#xff0c;而且现阶段…...

编程日记 2025/6/2 3:42:25

idea上git log面板的使用

文章目录 各种颜色含义具体的文件的颜色标签颜色&#x1f3f7;️ 节点和路线 各种颜色含义 具体的文件的颜色 红色&#xff1a;表示还没有 git add 提交到暂存区绿色&#xff1a;表示已经 git add 过&#xff0c;但是从来没有 commit 过蓝色&#xff1a;表示文件有过改动 标…...

编程日记 2025/6/3 16:29:46

03.选择排序

一、题目思路 选择排序是一种简单直观的排序算法。它的工作原理是&#xff1a;首先在未排序序列中找到最小&#xff08;或最大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;或最大&#xff…...

编程日记 2025/5/31 15:20:59

麒麟V10系统上安装Oracle

以下是在麒麟V10系统上安装Oracle数据库的详细步骤&#xff1a; 安装前准备 检查系统版本&#xff1a;使用uname -a、cat /etc/os-release等命令检查服务器是麒麟V10系统。 配置固定IP和本地yum源&#xff1a; 挂载麒麟V10的iso文件到/mnt目录&#xff0c;如mount -o loop Ky…...

编程日记 2025/6/3 3:14:54

PyTorch 神经协同过滤 (NCF) 推荐系统教程

目录 教程概述1. 神经协同过滤模型概述NCF 模型的主要组成部分&#xff1a; 2. 数据加载与预处理3. 定义神经协同过滤模型4. 训练模型5. 模型评估6. 推荐物品7. 完整示例8. 总结 在本教程中&#xff0c;我们将使用 PyTorch 实现一个神经协同过滤&#xff08;Neural Collaborat…...

编程日记 2025/6/3 5:05:45

日志收集Day001

1.ElasticSearch 作用&#xff1a;日志存储和检索 2.单点部署Elasticsearch与基础配置 rpm -ivh elasticsearch-7.17.5-x86_64.rpm 查看配置文件yy /etc/elasticsearch/elasticsearch.yml&#xff08;这里yy做了别名&#xff0c;过滤掉空行和注释行&#xff09; yy /etc/el…...

编程日记 2025/6/2 6:57:33

【氮化镓】香港科技大学陈Kevin-单片集成GaN比较器

一、引言（Introduction） GaN HEMT的重要性 文章开篇便强调了氮化镓（GaN）高电子迁移率晶体管（HEMT）在下一代功率转换系统中的巨大潜力。GaN HEMT具备高开关频率、低导通电阻、高击穿电压以及宽工作温度范围等优势，使其成为功率电子领域的热门研究对象。这些特性使得GaN…...

编程日记 2025/6/4 9:48:13

LDD3学习9--数据类型和定时器

这部分对应的是第七章和第十一章&#xff0c;因为内容也不是很多&#xff0c;就一起写了。里面的内容基本上就是一个个的点&#xff0c;所以也就一个个点简单总结一下。 1 数据类型 1.1 数据长度 不同操作系统类型长度可能不一样&#xff0c;看图的话最好用u8&#xff0c;u16&…...

编程日记 2025/6/2 6:57:20

性价比1.2V电压基准替代

前言&#xff1a; 小于2V的电压基准比较少&#xff0c;且价格稍贵&#xff0c;对于要求不高的场合&#xff0c;1117可以替代使用&#xff0c;温度系数低于 100ppm/C, 价格便宜。 1117是线性稳压器的一种&#xff0c;一般情况下&#xff0c;输出电压可调。 如下述的1117&#xf…...

编程日记 2025/6/2 13:37:02