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

【前端】【css】【总复习】三万字详解CSS 知识体系

news 来源：原创 2025/7/27 0:47:37

🌈 CSS 知识体系目录大纲

一、基础知识入门

1. CSS 简介与作用

CSS（Cascading Style Sheets，层叠样式表）是一种用于给 HTML 页面添加样式的语言，作用是让网页更美观、结构更清晰、布局更灵活。

核心作用：

控制网页元素的 颜色、字体、间距、边框、背景
布局网页元素位置，如 横排、竖排、居中、响应式
添加 过渡动画、响应式适配、主题切换 等动态交互效果

🧠 一个网页结构由 HTML 提供骨架，CSS 负责美化“皮肤”，JS 控制交互行为。

2. CSS 的引入方式

2.1 行内样式（inline style）

直接写在标签的 style 属性里，优先级高，但不推荐大量使用。

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

2.2 内部样式表（internal style）

写在 <style> 标签中，放在 HTML <head> 中，适合小型页面或测试样式。

<head><style>p {color: blue;}</style>
</head>

2.3 外部样式表（external stylesheet）

将 CSS 单独放在 .css 文件中，用 <link> 标签引入，最推荐方式，利于复用和维护。

<link rel="stylesheet" href="styles.css" />
/* styles.css 文件 */
p {color: green;
}

3. 基本语法与结构

CSS 使用 选择器 + 声明块 的结构来描述样式：

selector {property: value;
}

例如：

h1 {font-size: 24px;color: #333;
}

selector：选择器，如 h1、.class、#id
property：样式属性，如 font-size、color
value：属性的取值，如 24px、#333
每条样式以 ; 结尾，声明块使用 {} 包裹

4. 注释与代码规范

4.1 CSS 注释格式

/* 这是一个注释 */

注释不会被浏览器解析
用于解释代码、团队协作或调试

4.2 编写规范建议

缩进统一：使用 2 或 4 个空格缩进
属性对齐：每个属性单独一行
选择器简洁：不嵌套过深，不滥用 !important
文件结构清晰：样式分模块、分功能归类
命名语义化：例如 .btn-primary, .card-header 更具可读性

💡 推荐使用 Prettier、Stylelint 等工具统一风格，提高代码质量。

二、选择器详解

CSS 选择器用于“选中”网页中的 HTML 元素，给它们添加样式。掌握选择器能让你精确控制样式的作用范围。

1. 基础选择器（标签、类、ID）

1.1 标签选择器

选择 HTML 中的某一类标签，如 h1、p、div 等。

p {color: blue;
}

1.2 类选择器 `.class`

选择具有特定类名的元素，最常用！

.box {border: 1px solid black;
}

1.3 ID 选择器 `#id`

选择具有唯一 ID 的元素，一个页面中一个 ID 只能用一次。

#header {background-color: #f0f0f0;
}

⚠️ 尽量少用 ID 选择器，因为它权重高、可复用性差。

2. 组合选择器（后代、子、兄弟）

2.1 后代选择器（空格）

选择某元素内部的所有子孙元素。

ul li {list-style: none;
}

2.2 子选择器（>）

只选择直接子元素。

div > p {color: red;
}

2.3 相邻兄弟选择器（+）

选择某元素后面紧挨着的兄弟元素。

h1 + p {margin-top: 0;
}

2.4 通用兄弟选择器（~）

选择某元素后面所有的兄弟元素。

h1 ~ p {color: gray;
}

3. 属性选择器

根据 HTML 属性值来选中元素。

/* 有 type 属性的元素 */
input[type] {border: 1px solid gray;
}/* 属性值是 text */
input[type="text"] {background-color: #fafafa;
}/* 属性值以 "btn" 开头 */
button[class^="btn"] {padding: 10px;
}

4. 伪类选择器（交互状态类）

伪类表示元素在某些状态下的样式。

a:hover {color: red; /* 鼠标悬停时 */
}input:focus {outline: 2px solid blue; /* 获得焦点时 */
}li:nth-child(2) {color: green; /* 选中第二个 li */
}

常用伪类：

:hover：鼠标悬停
:focus：获得焦点
:active：被点击
:first-child / :last-child：第一个 / 最后一个子元素
:nth-child(n)：第 n 个子元素（从 1 开始）

5. 伪元素选择器（内容增强类）

伪元素用于“虚拟”地选中 HTML 中某个部分，常用于添加装饰性内容。

p::before {content: "📌 ";
}p::after {content: " ✅";
}

常见伪元素：

::before：在元素前插入内容
::after：在元素后插入内容
::first-line：选中文本的第一行
::first-letter：选中文本的首字母

✅ 使用伪元素时必须配合 content 属性。

选择器优先级与权重计算

当多个选择器选中同一个元素时，优先级决定哪条样式生效。

类型	示例	权重值
行内样式	`<p style="">`	1000
ID 选择器	`#id`	100
类 / 属性 / 伪类	`.class`, `[type]`, `:hover`	10
标签 / 伪元素	`p`, `::before`	1

示例：

p {color: blue;      /* 权重 1 */
}.content p {color: green;     /* 权重 11（10 + 1） */
}#main .content p {color: red;       /* 权重 111（100 + 10 + 1） */
}

最终颜色是红色，因为权重高。

三、盒模型与文档流

CSS 盒模型是网页布局的基础概念，而文档流决定了元素在页面上的自然排列方式。

1. 标准盒模型 vs IE 盒模型

标准盒模型（W3C）

width = 内容宽度（content）
总宽度 = content + padding + border

box-sizing: content-box; /* 默认值 */

IE 盒模型（怪异模式）

width = 内容宽度 + 内边距 + 边框

box-sizing: border-box;

2. 盒子各部分详解

CSS 盒模型由以下几个部分组成（从内到外）：

content：实际内容区域（如文字、图片）
padding（内边距）：内容与边框之间的空隙
border（边框）：盒子的边界线
margin（外边距）：盒子与其他盒子之间的距离

示例：

.box {width: 200px;padding: 20px;border: 5px solid black;margin: 10px;
}

3. `box-sizing` 的使用

控制盒子尺寸计算方式的关键属性：

/* 推荐设置 */
* {box-sizing: border-box;
}

content-box（默认）：宽度 = 内容宽度
border-box：宽度包含内容、内边距和边框 → 更好控制整体布局宽度

4. 外边距合并与塌陷问题（Margin Collapsing）

外边距合并（或称“塌陷”）是 CSS 中一个常见但容易被忽视的行为。主要发生在 垂直方向上的块级元素之间，可能导致布局意外缩小或不生效。

4.1 什么是外边距合并？

垂直方向上，当两个块级元素相邻或嵌套时，它们的 margin-top 和 margin-bottom 可能会发生合并，最终呈现一个单一的边距，而不是两者之和。

4.2 外边距合并的三种情况

① 相邻兄弟元素合并

<div class="a"></div>
<div class="b"></div>
.a {margin-bottom: 30px;
}
.b {margin-top: 20px;
}

✅ 最终间距为 30px，即两者 margin 中的最大值。

② 空块元素内部 margin 与父元素合并（父元素没有margin-top的情况，子元素的margin-top作用了）

<div class="parent"><div class="child"></div>
</div>
.parent {border: 1px solid #ccc;
}
.child {margin-top: 40px;
}

✅ 如果 .parent 没有 padding/border/overflow，那么 .child 的 margin-top 会与 .parent 合并，整体元素像是“外推”了 40px。

③ 父子元素上下 margin 合并

.parent {margin-top: 50px;
}
.child {margin-top: 30px;
}

✅ 结果不是两者之和，而是取最大值 50px。

4.3 如何解决外边距合并

若你不希望发生合并，可以采用以下几种方式：

方法	原理	示例
1. 添加内边距（`padding`）	打断合并通道	`.parent { padding-top: 1px; }`
2. 设置边框	同样打断合并	`.parent { border-top: 1px solid transparent; }`
3. 设置 `overflow`	创建新的格式化上下文	`.parent { overflow: hidden; }`
4. 使用 `display: flow-root` ✅ 推荐	生成块格式化上下文（BFC）	`.parent { display: flow-root; }`

4.4 推荐做法

遇到 margin 合并导致页面结构不符合预期时，优先尝试 display: flow-root，简单易控。
尽量避免父子结构都设置相同方向的 margin，改用 padding 或使用间隔组件（如 .gap 类）。
如果需要更清晰的布局控制，Flex 和 Grid 布局可以完全避免 margin 合并问题。

总结：

外边距合并是 CSS 的“潜规则”之一，虽然是规范行为，但不易察觉，且容易造成布局混乱。理解其触发条件并掌握解决方案，有助于写出更健壮的 CSS 布局。是否需要一个示意图来更直观理解？

5. `display` 与文档流

CSS 中元素的布局取决于其 display 属性，以及它在文档流中的位置。

5.1 block（块级元素）

独占一行，宽度默认撑满父容器
可设置 width、height、margin、padding

常见块级元素：div、p、h1-h6、ul、ol、li

5.2 inline（行内元素）

不换行，宽高不可设置（仅左右 padding 生效）
宽度由内容撑开

常见行内元素：span、a、strong、em

5.3 inline-block（行内块元素）

兼具 inline 与 block 特性
可以不换行显示多个元素，又可设置宽高

.btn {display: inline-block;width: 100px;height: 40px;
}

💡理解盒模型和文档流是后续掌握布局（Flex、Grid、Position）和响应式设计的基础。

四、布局体系

布局是网页开发中控制元素位置和排布的核心。掌握不同布局方案，能够应对各种页面结构需求。

1. 浮动布局（Float）

基本用法

.float-left {float: left;
}
.float-right {float: right;
}

清除浮动（clearfix）

.clearfix::after {content: "";display: block;clear: both;
}

特点

脱离文档流，常用于左右并排布局
可能引起父元素高度塌陷，需手动清除浮动

2. 定位布局（Position）

值	说明
static	默认值，按照文档流排列
relative	相对自身原位置移动
absolute	相对最近的定位祖先元素偏移
fixed	相对于视口定位，不随滚动条移动
sticky	混合行为：滚动到指定位置时固定

.box {position: absolute;top: 20px;left: 50px;
}

注意

absolute 会脱离文档流
sticky 兼具 relative 和 fixed 的特性，适合粘性头部

3. Flex 弹性布局

Flex布局是CSS中的一种布局模式，非常适合处理一维排列的布局（无论是横向或纵向）。它提供了非常灵活的方式来控制子元素的排列方式和对齐方式，简化了许多传统布局的代码。

3.1 容器属性

这些属性控制整个容器如何排列子元素。

display: flex;

启用Flex布局，让容器的子项自动变成flex元素。
flex-direction: row | column;

规定项目的排列方向。
- row（默认值）：水平方向排列（从左到右）。
- column：垂直方向排列（从上到下）。
justify-content: flex-start | center | space-between | space-around | space-evenly;

控制主轴（flex-direction的方向）上的对齐方式。
- flex-start：项目从容器的起始位置开始排列（默认）。
- center：项目居中排列。
- space-between：项目之间有均匀的间隔，第一个和最后一个项目紧贴容器边缘。
- space-around：项目之间有均匀的间隔，且两端有半个间隔。
- space-evenly：项目之间的间隔完全相等。
align-items: stretch | center | flex-start | flex-end | baseline;

控制交叉轴（垂直于主轴）上的对齐方式。
- stretch（默认值）：项目拉伸以适应容器的高度。
- center：项目垂直居中对齐。
- flex-start：项目与容器的顶部对齐。
- flex-end：项目与容器的底部对齐。
- baseline：项目的基线对齐。
flex-wrap: nowrap | wrap | wrap-reverse;

控制项目是否换行。
- nowrap（默认值）：不换行，所有项目在一行内显示。
- wrap：如果项目空间不足，自动换行。
- wrap-reverse：与wrap相似，但换行方向相反（从底部到顶部）。

3.2 子项属性

子项属性控制了Flex容器内各个子元素如何在容器中进行排列和对齐。每个子项都可以使用这些属性来自定义其布局表现。

1. `flex`

flex 是 flex-grow、flex-shrink 和 flex

【前端】【css】【总复习】三万字详解CSS 知识体系

🌈 CSS 知识体系目录大纲一、基础知识入门 1. CSS 简介与作用 CSS（Cascading Style Sheets，层叠样式表）是一种用于给 HTML 页面添加样式的语言，作用是让网页更美观、结构更清晰、布局更灵活。核心作用：控制网页元素的颜色、字体、间距、边框、背景布局网页元素位置…...

编程日记 2025/7/27 0:47:37

Linux 进程等待

1、进程等待僵尸进程是一个比较麻烦的问题，如果不对其做出处理，僵尸进程就会越来越多，导致内存泄漏和标识符占用问题进程一旦变成僵尸状态，那就刀枪不入，“杀人不眨眼”的kill -9 也无能为力，因为…...

编程日记 2025/7/27 0:31:38

轻量服务器与宝塔

因为访问宝塔面板是需要在安全组设置一下开放端口，比如这里是42450 但是我们用的轻量服务器是把安全组这种功能削减了的，所以我就去尝试修改了一下防火墙设置然后就可以访问了...

编程日记 2025/7/27 0:37:58

深入理解AMBA总线（六）AHB-lite Slave响应和其它控制信号

上一篇文章给大家介绍了AHB-lite的一些控制信号，重点是通过这些控制信号去理解AHB-lite为什么这么设计，采用这些控制信号有什么好处。这节课给大家带来剩余的一些控制信号介绍。 ** 1、Slave Response Signaling ** 1.1、Slave Transfer Responses …...

编程日记 2025/7/23 1:16:41

app加固

1、什么是加固? 我们之前讲的逆向,大多数都是用加密算法去加密一些明文字符串,然后把得到的结果用 Base64、Hex等进行编码后提交。加固其实也一样，只不过他通常加密的是 dex文件而已。但是 dex 文件加密以后，安卓系统是没法直接运行的。所以加固的核心&…...

编程日记 2025/7/24 1:24:29

Linux架构篇、第三章_2_Linux服务器监控与NGINX优化

Linux_架构篇欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目： 版本号: 1.0,0 作者: 老王要学习日期: 2025.05.11 适用环境: Centos7 文档说明本文围绕 Linux 服务器监控与 NGINX 优化展开。介绍了 sysst…...

编程日记 2025/7/24 20:14:14

第26节：卷积神经网络(CNN)-数据增强技术（PyTorch）

1. 引言在深度学习领域，数据增强(Data Augmentation)是提升卷积神经网络(CNN)性能的关键技术之一。通过人为地扩展训练数据集，数据增强能够有效提高模型的泛化能力，防止过拟合，特别是在训练数据有限的情况下。本文将全面介绍PyTorch框架下的数据增强技术，包括基本原理、…...

编程日记 2025/7/24 13:48:21

架构思维：通用架构模式_怀疑下游的设计思路与最佳实践

文章目录 1. 引言2. 为什么要“怀疑下游”3. 三大类下游依赖及应对方案3.1 对其他微服务的依赖3.1.1 分布式事务简易补偿方案3.2 对数据库的依赖3.3 对消息中间件的依赖 4. 分布式事务实战案例5. 小结 1. 引言在架构思维：通用架构模式_从设计到代码构建稳如磐石的…...

编程日记 2025/7/25 23:32:01

[Java实战]Spring Boot 中Starter机制与自定义Starter实战（九）

[Java实战]Spring Boot 中Starter机制与自定义Starter实战（九） 引言 Spring Boot 的 Starter 是其“约定优于配置”理念的核心体现，通过简化依赖管理和自动配置，极大提升了开发效率。本文将深入剖析 Starter 的设计思想、实现原…...

编程日记 2025/7/26 5:43:49

C++23 views::repeat (P2474R2) 深入解析

文章目录引言C20 Ranges库回顾什么是Rangesstd::views的作用 views::repeat概述基本概念原型定义工作原理应用场景初始化容器模拟测试数据总结引言在C的发展历程中，每一个新版本都会带来一系列令人期待的新特性，这些特性不仅提升了语言的性能和表达…...

编程日记 2025/7/25 7:07:43

【第三十五周】Janus-pro 技术报告阅读笔记

Janus-Pro 摘要Abstract文章信息引言方法Janus 架构Janus 训练Janus-Pro 的改进实验结果总结摘要本篇博客介绍了Janus-Pro，这是一个突破性的多模态理解与生成统一模型，其核心思想是通过解耦双路径视觉编码架构解决传统方法中语义理解与像素生成的任务…...

编程日记 2025/7/25 17:34:00

基于Qt的app开发第七天

写在前面笔者是大一下计科生，标题这个项目是笔者这个学期的课设，与学长共创，我负责客户端部分，现在已经实现了待办板块的新建、修改。这个项目目前已经走上正轨了，博主也实现了主要功能的从无到有&#xff…...

编程日记 2025/7/22 23:54:51

第二十二节：图像金字塔-拉普拉斯金字塔

在数字图像处理的奇幻世界中，存在着一种能够连接不同视觉维度的神秘阶梯——图像金字塔。这种独特的结构让计算机视觉算法能够在不同尺度下观察和理解图像特征，而其中的拉普拉斯金字塔更是隐藏着图像细节重构的终极奥秘。一、金字塔的数学基础：从高斯到拉普拉斯 1.1 高斯金…...

编程日记 2025/7/25 4:10:27

Flutter基础（）

导航栏 appBar: AppBar() title: const Text(搜索) //标题 backgroundColor: Colors.blue //背景颜色 centerTitle: true //标题居中leading 属性作用： 放置在应用栏左侧的控件，通常是一个图标按钮，用于导航或打开菜单。 AppBar(le…...

编程日记 2025/7/26 13:44:42

ES面试题系列「一」

1、Elasticsearch 是什么？它与传统数据库有什么区别？ 答案：Elasticsearch 是一个基于 Lucene 的分布式、开源的搜索和分析引擎，主要用于处理大量的文本数据，提供快速的搜索和分析功能。与传统数据库相比，E…...

编程日记 2025/7/26 18:18:23

Oracle 通过 ROWID 批量更新表

Oracle 通过 ROWID 批量更新表在 Oracle 数据库中，使用 ROWID 进行批量更新是一种高效的更新方法，因为它直接定位到物理行位置，避免了通过索引查找的开销。 ROWID 基本概念 ROWID 是 Oracle 数据库中每一行的唯一物理地址标识符&#xff…...

编程日记 2025/7/24 18:15:22

罗技无线鼠标的配对方法

罗技鼠标的配对方法： 重新连接鼠标请按照以下步骤将鼠标与 USB 接收器重新配对。 1.将USB接收器插入计算机。 2.将鼠标关闭电源。 3.按住并持续按住向右按钮，直到操作结束。 4.切换鼠标电源。 5. 单击一次左侧按钮。 6. 单击一次中间按钮。 7.全部松开&…...

编程日记 2025/7/24 17:29:06

移动应用开发的六大设计原则

在移动应用开发中，遵循设计原则能大幅提升代码的可维护性和扩展性。本文以一个简单的学生管理系统为例，解析六大核心设计原则的实践方法。 1. 单一职责原则优点： 提高可维护性：一个类只负责一项职责，代码的功能会更…...

编程日记 2025/7/25 6:37:45

LLM初识

从零到一：用 Python 和 LLM 构建你的专属本地知识库问答机器人摘要： 随着大型语言模型（LLM）的兴起，构建智能问答系统变得前所未有的简单。本文将详细介绍如何使用 Python，结合开源的 LLM 和向量数据库技…...

编程日记 2025/7/24 2:59:57

【CTF】Linux Shell RCE绕过（bypass）技术总结

在Linux环境下，远程代码执行（RCE，Remote Code Execution）是一种常见的攻击手段。然而，许多系统会对命令注入进行过滤或限制，例如禁止特定关键字（如system）、斜杠（/&#…...

编程日记 2025/7/23 9:52:53

深入理解 Linux 权限控制机制

引言在 Linux 系统中，权限控制是保障系统安全的核心机制。通过限制用户对文件和资源的访问，它能有效防止未授权操作，保护数据不被篡改或泄露。合理设置权限不仅有助于实现用户隔离和最小权限原则，还能降低系统被滥用或攻击的风险…...

编程日记 2025/7/23 23:25:32

技术书籍推荐(002)

20. 利用Python进行数据分析免费电子书 PDF 下载书籍简介： 本书聚焦于使用Python进行数据处理和分析。详细介绍了Python中用于数据分析的重要库，如NumPy（提供高效的数值计算功能，包括数组操作、数学函数等）、panda…...

编程日记 2025/7/25 10:34:38

[SAP] SAP ERP用户参数设置

菜单路径个人默认值的设置(数值，日期，时间) 个人参数值的设置在给参数设置参数值后，当用户登录到对应功能页面时，这些参数值就会自动带出来例如，我们分别对上述AAT，VKO以及VTW这3个参数设置了参数值&am…...

编程日记 2025/7/23 1:18:43

Python中，async和with结合使用，有什么好处？

在Python的异步编程中，async和with的结合使用（即async with）为开发者提供了一种优雅且高效的资源管理模式。这种组合不仅简化了异步代码的编写，还显著提升了程序的健壮性和可维护性。以下是其核心优势及典型应用场景的分析&#x…...

编程日记 2025/7/6 10:03:58

【信息系统项目管理师】第3章：信息系统治理 - 29个经典题目及详解

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...

编程日记 2025/7/21 11:21:10

python实战项目69：基于Python爬虫的链家二手房数据采集方法研究

python实战项目69：链家二手房数据采集一、项目需求1.1 房地产数据价值1.2 传统数据获取局限性1.3 技术可行性二、数据采集流程2.1 需求分析2.2 网页结构分析2.3 请求发送与反爬策略2.4 数据解析2.5 数据存储三、结论与展望四、完整代码一、项目需求本文针对房地产数据分析需…...

编程日记 2025/7/24 17:58:03

PowerShell 脚本中文乱码处理

问题描述脚本带中文，执行时命令行窗口会显示出乱码示例 Write-Host "测试成功！"解决方法问了DeepSeek，让确认是不是 UTF8 无 BOM 格式事实证明方向对了但是确认信息有偏差改成 UTF8 with BOM 使用任意支持修改编码的文本…...

编程日记 2025/7/23 13:13:24

SpEL（Spring Expression Language）使用详解

SpEL（Spring Expression Language）是 Spring 框架中一种强大的表达式语言，支持在运行时动态查询和操作对象图。它与 Spring 生态深度集成，广泛应用于依赖注入、数据绑定、AOP、安全规则等场景。以下是其核心语法、应用场景及使用示…...

编程日记 2025/7/21 17:19:57

论文阅读与写作：《从探索到突破：解密科研和论文写作的思维密码》

文章目录一、如何做科研1.科研的步骤2.课题选择3.快速入门一个新领域：读论文，先读综述(1)自己看论文的时候，每篇论文花3-5分钟记录一下自己的idea和一些瞬间的想法(2)高质量文献：顶会顶刊(3)如何检索 4.注重团队协作与学术交流5.…...

编程日记 2025/7/23 23:31:17

免费公共DNS服务器推荐

当自动获取的DNS或本地运营商的DNS出现问题，可能导致软件无法连接服务器。此时，手动修改电脑的DNS设置或许能解决问题。许多用户觉得电脑上网速度慢、游戏卡顿，归咎于DNS问题。确实，我们可以自行设置一个DNS来改善网络体验。不少用…...

编程日记 2025/7/26 10:56:00

CK-S650-PA60S半导体专用读写器|读写头与绿联RS232串口转接头联机测试说明

CK-S650-PA60S半导体专用读写器|读写头是一款国产替代欧姆龙V640系列，支持德州仪器公司(TI)制造的RI-TRP-DR2B、RI-TRP-WR2B-40低频玻璃管标签|射频标签读写，广泛应用半导体硅片盒、晶圆盒、花篮等RFID插件识别与产品追溯领域。 CK-S650-PA60S半导体专用…...

编程日记 2025/7/24 21:07:02

Babel 基础使用指南：从安装到编译的完整流程

Babel 是当今前端开发中不可或缺的工具，它允许开发者使用最新的 JavaScript 特性，同时确保代码能在各种浏览器和环境中运行。本文将带你从零开始学习 Babel 的基础使用，涵盖安装、配置到实际编译的全过程。 1. 安装 Babel 和插件首先&…...

编程日记 2025/7/26 2:04:18

uniapp-商城-52-后台商家信息（商家信息数据，云对象使用）

1、概述已经通过好几个篇幅来说明商家信息，包括logo、商家名称，地址，电话以及商家简介。通过表单组件和标签，以及我们的文件上传标签，都做了说明。（logo上传，用的文件上传组件是上传到公共的数…...

编程日记 2025/7/26 0:51:01

【我的创作纪念日】512

机缘还记得 2023 年 12 月 15 日，我撰写了第 1 篇技术博客：《oracle 跟踪文件--审计日志》。从此，这平凡的一天，赋予了我不平凡的意义。在那一刻，我已在创作这趟旅程中出发，并立志将工作中的经验总结&…...

编程日记 2025/7/23 1:27:59

共享内存与信号量结合

在Linux系统中，进程间通信（IPC）和原子性是并发编程中的核心问题。以下是对这些概念的详细分步解释： 一、进程间通信（IPC）方法 1. 管道（Pipe） 匿名管道：用于父子进程等有…...

编程日记 2025/7/24 4:17:13

西门子PLC s7-1200工艺对象“轴”的应用(1)

1. 工艺对象 “ 轴 ” 的概念在西门子 S7-1200 PLC 中，术语 “ 轴 ” 特指用 “ 轴 ” 工艺对象表示的驱动器工艺映像。 “ 轴 ” 工艺对象是用户程序与驱动器之间的接口，用于接收用户程序中的运动控制命令、执行这些命令并监视其运行情况。运动控制…...

编程日记 2025/7/23 5:30:59

ubuntu22.04在 Docker容器中安装 ROS2-Humble

22.04 安装 docker 容器并实现rviz功能 1 docker pull命令拉取包含ROS-Humble的镜像： docker pull osrf/ros:humble-desktop-full-jammy docker images验证该镜像是否拉取成功。使用镜像osrf/ros:humble-desktop-full-jammy创建并运行容器 sudo docker run -it…...

编程日记 2025/7/23 5:31:00

【LwIP源码学习6】UDP部分源码分析

前言本文对lwip协议栈里UDP部分的源码进行分析。将源码中最关键部分提取出来，梳理UDP部分的设计框架。应用层例子首先举一个应用层使用UDP的简单例子，如下： //第一步：申请套接字 sock socket(AF_INET, SOCK_DGRAM, 0); //…...

编程日记 2025/7/26 20:03:51

Python Cookbook-7.10 在 MySQL 数据库中储存 BLOB

任务想把一个二进制的大对象(BLOB)存入MySQL数据库解决方案 MySQLdb 模块并不支持完整的占位符，不过可以使用模块的escape_string 函数来解决: import MySQLdb,cPickle #连接到数据库，用你的本机来测试数据库，并获得游标 connection = MySQLdb.connect(db = "tes…...

编程日记 2025/7/11 18:59:41

LWIP的ICMP协议

ICMP协议简介 ICMP协议是一个网络层协议背景：如果丢包了，IP协议并不能通知传输层是否丢包以及丢包的原因。因此我们需要ICMP协议来完成这样的功能为什么需要ICMP协议 1，IP 协议本身不提供差错报告和差错控制机制来保证数据报递交的有效…...

编程日记 2025/7/20 7:04:48

Spring Web MVC响应

返回静态页面第一步创建html时，要注意创建的路径，要在static下面第二步把需要写的内容写到body内第三步直接访问路径就可以返回数据ResponseBody RestController Controller ResponseBody Controller：返回视图 ResponseBody&…...

编程日记 2025/7/22 2:07:22

STM32智能窗帘系统：从零到一的开发实战

简介智能窗帘控制系统是智能家居领域的经典应用，随着物联网技术的不断发展，其功能从简单的远程控制演变为具备环境感知、多设备联动和跨平台兼容的智能系统。本篇文章将全面解析基于STM32的智能窗帘系统开发方案，从硬件设计到软件实现，再到企业级扩展功能，提供完整的代码…...

编程日记 2025/7/21 18:00:07

第三方评测机构如何凭借专业公正提供高可靠性软件检测服务？

第三方评测机构与软件开发及使用单位保持独立，凭借其专业技能和公正立场，为企业提供多样化的软件检测服务。这些检测结果的可靠性极高，不仅有助于企业减轻负担，节省人力和物力资源，而且赢得了业界的普遍认可。下面&…...

编程日记 2025/7/26 17:36:28

相或为K（位运算）蓝桥杯（JAVA）

这个题是相或为k，考察相或的性质，用俩个数举例子，011001和011101后面的数不管和哪个数相或都不可能变成前面的数，所以利用这个性质我们可以用相与运算来把和k对应位置的1都积累起来，看最后能不能拼起来k如果能拼起来k那…...

编程日记 2025/7/22 12:16:09

X.509证书详解

文章目录 1. X.509证书基础1.1 什么是X.509证书1.2 X.509证书结构1.3 证书编码格式2. Java中的X509Certificate2.1 类层次结构2.2 核心方法3. 获取X509Certificate对象3.1 从文件加载证书3.2 从KeyStore获取证书3.3 从HTTPS连接获取证书4. 创建自签名证书5. 证书验证5.1 基本验…...

编程日记 2025/7/27 0:40:44

深入浅出：Spring Boot 中 RestTemplate 的完整使用指南

在分布式系统开发中，服务间通信是常见需求。作为 Spring 框架的重要组件，RestTemplate 为开发者提供了简洁优雅的 HTTP 客户端解决方案。本文将从零开始讲解 RestTemplate 的核心用法，并附赠真实地图 API 对接案例。一、环境准备在 Spring…...

编程日记 2025/7/24 15:44:56

C++23 views::repeat (P2474R2) 写一篇博客

文章目录 std::views::enumerate 简介使用示例性能和灵活性与其他视图的结合使用总结 C23 标准引入了众多令人期待的新特性，其中 std::views::enumerate 便是一个备受瞩目的新增视图。这个新特性通过为迭代器提供索引和元素的组合，极大地简化了对集合中…...

编程日记 2025/7/25 22:39:06

微软向现实低头：悄悄延长Windows 10的Microsoft 365支持

快科技5月11日消息，Windows 10将在今年10月14日正式结束支持，此前微软曾明确表示，Microsoft 365（M365）应用，如Outlook、Teams、OneDrive、Word、Excel等，也将随之停止支持。不过无法升级至Win…...

编程日记 2025/7/23 22:24:52

数字化转型-4A架构之技术架构

4A架构系列文章数字化转型-4A架构（业务架构、应用架构、数据架构、技术架构） 数字化转型-4A架构之业务架构数字化转型-4A架构之应用架构数字化转型-4A架构之数据架构数字化转型-4A架构之技术架构一、技术架构 Technology Architecture 1. 技…...

编程日记 2025/7/21 3:55:37

生产级 Flink CDC 应用开发与部署：MySQL 到 Kafka 同步示例

生产级 Flink CDC 应用开发与部署：MySQL 到 Kafka 同步示例为了帮助你更好地理解如何将 Flink 作业部署为独立服务，下面我将提供一个完整的工程代码示例。这个例子基于之前的 MySQL 到 Kafka 的数据同步需求，但这次我们将 Flink 作业作为一个独立的服务进行打包和部署。 …...

编程日记 2025/7/22 0:34:44