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

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

news 来源：原创 2025/6/21 23:57:39

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

目录

系列文章目录

前言

一、理论部分 

1. 块级元素（Block-level Elements）

2. 行内元素（Inline Elements）

3. 块级元素与行内元素的区别总结

4. 行内块级元素（Inline-block Elements）

5. 元素类型的转换

6. 实际应用中的选择

7. 注意事项

8. 总结

 二、实战部分

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、理论部分 

在CSS中，元素根据其默认的显示方式可以分为块级元素（Block-level Elements）和行内元素（Inline Elements）。理解这两者的区别对于网页布局和样式设计至关重要。下面将从定义、特点、常用元素、布局影响及转换方法等方面进行全面介绍。

1. 块级元素（Block-level Elements）

        块级元素在页面中默认独占一行，会从新的一行开始显示，并且会尽可能地占据其父元素的全部宽度。块级元素通常用于构建页面的结构，如标题、段落、列表等。

（1）特点

  • 独占一行：块级元素前后会自动换行，不会与其他元素在同一行显示。
  • 可设置宽高：可以通过CSS的width和height属性设置块级元素的宽度和高度。
  • 可设置内外边距：支持margin和padding属性，且这些属性会对周围元素产生影响。
  • 默认宽度为父元素的100%：如果不设置宽度，块级元素会默认占据父元素的全部宽度。

（2）常用块级元素

  • <div>：通用的块级容器，用于布局。
  • <p>：段落。
  • <h1> 到 <h6>：标题。
  • <ul>、<ol>、<li>：无序列表、有序列表和列表项。
  • <table>：表格。
  • <form>：表单。
  • <header>、<footer>、<section>、<article>：HTML5语义化标签。

(3)示例

html

<div>这是一个块级元素</div>
<p>这是另一个块级元素</p>

css

div {background-color: lightblue;width: 200px;height: 100px;margin: 10px;padding: 10px;
}
p {background-color: lightgreen;width: 300px;margin: 10px;
}

效果：

  • <div>和<p>会各自占据一行，并且可以设置宽高和边距

2. 行内元素（Inline Elements）

(1)定义

行内元素不会独占一行，而是与其他行内元素在同一行显示，直到空间不足时才会换行。行内元素通常用于包裹文本或其他行内内容，如链接、强调文本等。

(2)特点

  • 不独占一行：行内元素会与其他行内元素在同一行显示，直到空间不足。
  • 不能直接设置宽高：默认情况下，行内元素的宽度和高度由其内容决定，不能通过width和height属性直接设置。
  • 内外边距的垂直方向可能无效：margin和padding的水平方向（左右）会生效，但垂直方向（上下）可能不会影响周围元素的布局。
  • 默认宽度由内容决定：行内元素的宽度取决于其内容，不会自动扩展到父元素的全部宽度。

(3)常用行内元素

  • <span>：通用的行内容器，用于样式化文本。
  • <a>：超链接。
  • <strong>、<em>：强调文本。
  • <img>：图片（虽然<img>是行内元素，但可以通过CSS设置为类似块级元素的行为）。
  • <input>、<button>：表单控件（某些情况下表现为行内块级元素）。

(4)示例

html

<span>这是一个行内元素</span>
<a href="#">这是一个链接</a>

css 

span {background-color: yellow;padding: 10px;margin: 10px; /* 水平方向生效，垂直方向可能无效 */
}
a {background-color: pink;padding: 5px;
}

效果：

  • <span>和<a>会在同一行显示，且无法直接通过CSS设置宽高。

3. 块级元素与行内元素的区别总结

特性块级元素行内元素
默认显示方式独占一行与其他行内元素同行显示
宽度和高度可通过CSS设置默认由内容决定，不能直接设置
内外边距水平和垂直方向均生效水平方向生效，垂直方向可能无效
默认宽度父元素的100%由内容决定
常用场景构建页面结构包裹文本或小范围内容

4. 行内块级元素（Inline-block Elements）

CSS还提供了一种混合模式——行内块级元素（Inline-block Elements），它结合了行内元素和块级元素的特点：

  • 不独占一行：可以与其他行内块级元素或行内元素在同一行显示。
  • 可设置宽高：可以通过CSS设置宽度和高度。
  • 内外边距均生效：水平和垂直方向的margin和padding都有效。

(1)如何将元素设置为行内块级

通过CSS的display: inline-block;属性可以将元素设置为行内块级。

(2)示例

html

<span class="inline-block">行内块级元素1</span>
<span class="inline-block">行内块级元素2</span>

css

.inline-block {display: inline-block;width: 100px;height: 50px;background-color: coral;margin: 5px;padding: 5px;
}

效果：

  • 两个<span>元素会在同一行显示，并且可以设置宽高和边距。

5. 元素类型的转换

CSS的display属性可以改变元素的默认显示方式：

  • display: block;：将元素设置为块级元素。
  • display: inline;：将元素设置为行内元素。
  • display: inline-block;：将元素设置为行内块级元素。
  • display: none;：隐藏元素（不占据空间）。
  • display: flex;、display: grid;：用于现代布局方式。

(1)示例

html

<a href="#" class="block-link">将链接设置为块级元素</a>
<div class="inline-div">将div设置为行内元素</div>

css

.block-link {display: block;width: 200px;height: 50px;background-color: lightblue;margin: 10px;
}
.inline-div {display: inline;background-color: lightgreen;padding: 5px;
}

效果：

  • <a>元素会独占一行，并可以设置宽高。
  • <div>元素会与其他行内元素同行显示，且无法设置宽高。

6. 实际应用中的选择

  • 使用块级元素：
    • 当需要构建页面的结构（如导航栏、内容区域、页脚）时。
    • 当需要设置元素的宽高、边距时。
    • 当需要元素独占一行时。
  • 使用行内元素：
    • 当需要包裹文本或小范围内容（如链接、强调文本）时。
    • 当需要元素与其他元素在同一行显示时。
  • 使用行内块级元素：
    • 当需要元素在同一行显示，但又能设置宽高和边距时（如导航菜单项、按钮组）。

7. 注意事项

  1. 默认样式的重置：
    • 不同浏览器对元素的默认样式可能有所不同，建议使用CSS重置（如normalize.css）或手动重置默认样式。
  2. 语义化：
    • 在HTML5中，应尽量使用语义化的标签（如<header>、<section>、<article>）来替代<div>，以提高代码的可读性和SEO效果。
  3. 布局的灵活性：
    • 现代CSS布局方式（如Flexbox、Grid）可以更灵活地控制元素的排列，但在某些情况下，理解块级和行内元素的基本概念仍然很重要。

8. 总结

  • 块级元素：独占一行，可设置宽高和边距，常用于构建页面结构。
  • 行内元素：与其他行内元素同行显示，不能直接设置宽高，常用于包裹文本或小范围内容。
  • 行内块级元素：结合了两者的特点，可在同一行显示且可设置宽高和边距。
  • display属性：可以灵活地改变元素的显示方式，满足不同的布局需求。

 二、实战部分

1.代码如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型-块级元素，行内元素</title><style type="text/css">/* 块级元素的特点1.块级元素独占一行，标准文档流2.宽和高可以设置3.margin可以取负数，padding不可以取负数，padding和margin可以相加4.块级元素margin取同一空间值时，会出现塌陷，就是取最大值而不是相加 */div{border: 1px solid black;}.div1{width: 200px;height: 100px;/* margin: 10px;上下左右margin: 10px 30px;上下 左右margin: 10px auto;盒子在浏览器页面居中，上下留10pxmargin: 10px 20px 30px;上 左右 下margin: 10px 20px 30px 40px;上 右 下 左 */margin-left: 50px;padding-left: 20px;margin-bottom: 20px;/* display:inline-block; */  /* 通过CSS的display: inline-block;属性可以将元素设置为行内块级。 */}.div2{width: 100px;height: 50px;margin-left: 20px;}.div3{width: 100px;height: 100px;margin-top: 50px;/* display: inline-block; */}.div4{width: 200px;height: 100px;margin-top: 50px;/* display: inline-block; */}/* 行内元素特点：除span a是行内元素外，其余都是块级元素1.不独占一行2.不可以设置宽高，宽高由内容决定3.margin和padding上下设置无效，左右有效4.margin不会在行内元素里出现塌陷 */span{border: 1px solid black;}#sp1{width: 100px;height: 100px;margin-top: 100px;margin-left: 50px;padding-left: 50px;padding-top:50px ;margin-right: 50px;/* display:block; */  /* display: block;：将元素设置为块级元素 */}#sp2{margin-left:50px ;}</style></head><body><h1>块级元素</h1><div class="div1">div1<div class="div2">div2</div></div><div class="div3">div3</div><div class="div4">div4</div><h1>行内元素</h1><br><br><span id="sp1">span1span1</span><span id="sp2">span2</span><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>

2.代码运行如下

3.修改块级元素为行内快寄元素，行内元素变为块级元素

在块级元素div 的CSS样式中添加：display:inline-block;  属性可以将元素设置为行内块级。

在行内元素span 的CSS样式中添加：display: block;：将元素设置为块级元素

修改后的代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型-块级元素，行内元素</title><style type="text/css">/* 块级元素的特点1.块级元素独占一行，标准文档流2.宽和高可以设置3.margin可以取负数，padding不可以取负数，padding和margin可以相加4.块级元素margin取同一空间值时，会出现塌陷，就是取最大值而不是相加 */div{border: 1px solid black;}.div1{width: 200px;height: 100px;/* margin: 10px;上下左右margin: 10px 30px;上下 左右margin: 10px auto;盒子在浏览器页面居中，上下留10pxmargin: 10px 20px 30px;上 左右 下margin: 10px 20px 30px 40px;上 右 下 左 */margin-left: 50px;padding-left: 20px;margin-bottom: 20px;display:inline-block;  /* 通过CSS的display: inline-block;属性可以将元素设置为行内块级。 */}.div2{width: 100px;height: 50px;margin-left: 20px;}.div3{width: 100px;height: 100px;margin-top: 50px;display: inline-block;}.div4{width: 200px;height: 100px;margin-top: 50px;display: inline-block;}/* 行内元素特点：除span a是行内元素外，其余都是块级元素1.不独占一行2.不可以设置宽高，宽高由内容决定3.margin和padding上下设置无效，左右有效4.margin不会在行内元素里出现塌陷 */span{border: 1px solid black;}#sp1{width: 100px;height: 100px;margin-top: 100px;margin-left: 50px;padding-left: 50px;padding-top:50px ;margin-right: 50px;display:block;  /* display: block;：将元素设置为块级元素 */}#sp2{margin-left:50px ;}</style></head><body><h1>块级元素</h1><div class="div1">div1<div class="div2">div2</div></div><div class="div3">div3</div><div class="div4">div4</div><h1>行内元素</h1><br><br><span id="sp1">span1span1</span><span id="sp2">span2</span><a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a></body>
</html>

代码运行：

总结

以上就是今天要讲的内容，本文简单记录了CSS的盒子模型-块级元素、行内元素、行内块级元素和display属性，仅作为一份简单的笔记使用，大家根据注释理解

相关文章：

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…...

编程日记 2025/6/21 23:57:39

使用exceljs将excel文件转化为html预览最佳实践（完整源码）

前言 在企业应用中&#xff0c;我们时常会遇到需要上传并展示 Excel 文件的需求&#xff0c;以实现文件内容的在线预览。经过一番探索与尝试&#xff0c;笔者最终借助 exceljs 这一库成功实现了该功能。本文将以 Vue 3 为例&#xff0c;演示如何实现该功能&#xff0c;代码示例…...

编程日记 2025/5/29 10:01:30

7. 进程控制-进程替换

目录 1. 进程替换 1.1 单进程版&#xff1a; 1.2 进程替换的原理 1.3 多进程版-验证各种程序替换接口 2. 进程替换的各种接口 2.1 execl 2.2 execlp 2.3 execv 2.4 execvp 2.5 execle 1. 进程替换 上图为程序替换的接口&#xff0c;之后会详细介绍。 1.1 单进程版&am…...

编程日记 2025/6/21 22:30:33

关于计算机系统和数据原子性的联系

目录 1、计算机架构 1.1、处理器架构 1.2、内存寻址能力 1.3、性能差异 1.4、软件兼容性 1.5、指令集 1.6、开发和维护 2.、基本数据类型 3、原子类型 3.1、基本概念 3.2、基本数据类型的原子性 3.3、原子操作的解释 3.4、不保证原子性 3.5、解决方案 4、原子性…...

编程日记 2025/6/21 23:33:18

Armijo rule

非精线搜索步长规则Armijo规则&Goldstein规则&Wolfe规则_armijo rule-CSDN博客 [原创]用“人话”解释不精确线搜索中的Armijo-Goldstein准则及Wolfe-Powell准则 – 编码无悔 / Intent & Focused...

编程日记 2025/6/1 9:51:17

从数据包到可靠性：UDP/TCP协议的工作原理分析

之前我们已经使用udp/tcp的相关接口写了一些简单的客户端与服务端代码。也了解了协议是什么&#xff0c;包括自定义协议和知名协议比如http/https和ssh等。现在我们再回到传输层&#xff0c;对udp和tcp这两传输层巨头协议做更深一步的分析。 一.UDP UDP相关内容很简单&#xf…...

编程日记 2025/5/29 10:52:20

Prometheus实战教程：k8s平台-Mysql监控案例

配置文件优化后的 Prometheus 自动发现 MySQL 实例的完整 YAML 文件。该配置包括&#xff1a; MySQL Exporter 部署&#xff1a;使用 ConfigMap 提供 MySQL 连接信息。Prometheus 自动发现&#xff1a;通过 Kubernetes 服务发现自动抓取 MySQL 实例。 1、mysql 配置文件 &…...

编程日记 2025/6/21 22:31:44

执行apt-get update 报错ModuleNotFoundError: No module named ‘apt_pkg‘的解决方案汇总

Ubuntu版本ubuntu18.04 报错内容&#xff1a; //执行apt-get upgrade报错&#xff1a; Traceback :File “/usr/lib/cnf-update-db”, line 8, in <module>from CommandNotFound.db.creator import DbcreatorFile “/usr/lib/python3/dist-packages/CommandNotFound/db…...

编程日记 2025/6/21 23:26:01

QT6 源（101）篇一：阅读与注释 QPlainTextEdit，其继承于QAbstractScrollArea，属性学习与测试

&#xff08;1&#xff09; &#xff08;2&#xff09; &#xff08;3&#xff09;属性学习与测试 &#xff1a; &#xff08;4&#xff09; &#xff08;5&#xff09; 谢谢...

编程日记 2025/6/21 23:19:07

Redis（2）：Redis + Lua为什么可以实现原子性

Redis 作为一款高性能的键值对存储数据库&#xff0c;与 Lua 脚本相结合&#xff0c;为实现原子性操作提供了强大的解决方案&#xff0c;本文将深入探讨 Redis Lua 实现原子性的相关知识 原子性概念的厘清 在探讨 Redis Lua 的原子性之前&#xff0c;我们需要明确原子性的概念…...

编程日记 2025/6/21 22:54:07

ios打包ipa获取证书和打包创建经验分享

在云打包或本地打包ios应用&#xff0c;打包成ipa格式的app文件的过程中&#xff0c;私钥证书和profile文件是必须的。 其实打包的过程并不难&#xff0c;因为像hbuilderx这些打包工具&#xff0c;只要你输入的是正确的证书&#xff0c;打包就肯定会成功。因此&#xff0c;证书…...

编程日记 2025/6/21 23:10:19

Python生成器：高效处理大数据的秘密武器

生成器概述 生成器是 Python 中的一种特殊迭代器&#xff0c;通过普通函数的语法实现&#xff0c;但使用 yield 语句返回数据。生成器自动实现了 __iter__() 和 __next__() 方法&#xff0c;因此可以直接用于迭代。生成器的核心特点是延迟计算&#xff08;lazy evaluation&…...

编程日记 2025/6/21 22:56:48

C++11（2）

文章目录 右值引用和移动语义在传参中的提效list容器push_back & insert右值版本的模拟实现类型分类 (了解即可&#xff09;引用折叠万能引用 完美转发&#xff08;跟引用折叠有关&#xff09; 简介&#xff1a;这篇文章是继续介绍C11的一些新语法知识点&#xff0c;也是对…...

编程日记 2025/6/21 23:52:44

unity terrain 在生成草，树，石头等地形障碍的时候，无法触发碰撞导致人物穿过模型

1.terrain地形的草&#xff0c;石头之类要选择模型预制体 2.在人物身上挂碰撞器和刚体&#xff0c;或者单挂一个character controller组件也行 3.在预制体上挂碰撞盒就好了&#xff0c;挂载meshcollider会导致碰撞无效...

编程日记 2025/6/21 23:54:02

以项目的方式学QT开发C++（二）——超详细讲解（120000多字详细讲解，涵盖qt大量知识）逐步更新！

API 描述 函数原型 参数说明 push_back() 在 list 尾部 添加一个元素 void push_back(const T& value); value &#xff1a;要添 加到尾部的元 素 这个示例演示了如何创建 std::list 容器&#xff0c;并对其进行插入、删除和迭代操作。在实际应用中&am…...

编程日记 2025/5/23 19:18:14

养生：健康生活的极简攻略

在追求高效生活的当下&#xff0c;养生也能化繁为简。通过饮食、运动、睡眠与心态的精准调节&#xff0c;就能轻松为健康续航。 饮食上&#xff0c;遵循 “均衡、节制” 原则。早餐用一杯热豆浆搭配水煮蛋和半个苹果&#xff0c;唤醒肠胃活力&#xff1b;午餐以糙米饭为主食&am…...

编程日记 2025/6/21 23:28:20

C语言-8.数组

8.1数组 8.1.1初试数组 如何写一个程序计算用户输入的数字的平均数？ #include<stdio.h> int main() {int digit;//输入要求平均数的数字double sum=0;//记录输入数字的和int count=0;//记录输入数字的个数printf("请输入一组数字，用来求平均数，以-1结束\n&quo…...

编程日记 2025/6/21 23:33:18

代码随想录算法训练营第四十一天

LeetCode题目: 739. 每日温度496. 下一个更大元素 I503. 下一个更大元素 II 其他: 今日总结 往期打卡 739. 每日温度 跳转: 739. 每日温度 学习: 代码随想录公开讲解 问题: 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &…...

编程日记 2025/6/21 22:55:16

c++,windows,多线程编程详细介绍

目录 一、C11 标准库 <thread> 实现多线程编程1. 基本线程创建2. 线程管理3. 线程传参4. 同步机制5. 异步编程 二、Windows API 实现多线程编程1. 基本线程创建2. 线程管理3. 线程传参 三、两种方法的对比 在 Windows 平台上使用 C 进行多线程编程&#xff0c;可以通过 C…...

编程日记 2025/5/16 19:51:09

Python多线程

Python多线程 作为一名Python开发者&#xff0c;你是否遇到过这样的场景&#xff1a;程序需要同时处理多个任务&#xff0c;但单线程执行效率太低&#xff1f;这时候&#xff0c;多线程技术就能派上用场了。本文将带你深入浅出地理解Python多线程&#xff0c;并通过丰富的示例…...

编程日记 2025/6/21 22:37:51

VisionPro斑点寻找工具Blob

斑点寻找工具Blob 斑点概述 斑点分析 探测并且分析图像中的二维形状Blob是先根据用户设定好的灰阶范围对图像进行分割&#xff0c;然后对目标进行查找和分析。斑点报告多种属性&#xff1a; 面积质心周长主轴…….. 应用场景 Blob分析非常适合以下场合的应用&#xff1a; 对…...

编程日记 2025/5/16 19:18:10

【Python】【面试凉经】Fastapi为什么Fast

核心的关键词&#xff1a;ASGI、原生异步、协程、uvloop、异步生态、Pydantic编译时生成校验代码、DI system预计算依赖树 interviewer 00:32:49 FastAPI 它优越于其他一些主流web框架像 django或 flask 的这个点在哪里&#xff1f; 我 00:33:00fastapi 就是说它的 fast 性能高…...

编程日记 2025/6/21 23:27:03

LocalDateTime类型的时间在前端页面不显示或者修改数据时因为LocalDateTime导致无法修改，解决方案

1.数据库中的时间数据&#xff0c;在控制台可以正常返回&#xff0c;在前端无法返回&#xff0c;即显示空白&#xff0c;如下图所示: 2.这种问题一般时由于数据库和我们实体类的名称不一致引起的&#xff0c;我们数据库一般采用_的方式命名&#xff0c;但是在Java中我们一般采用…...

编程日记 2025/6/21 23:09:05

【Linux】gcc从源码编译安装，修改源码，验证修改的源码

前阵子电脑使用的win10&#xff0c;win10过几天就让升级&#xff0c;烦得不行。 然后把操作系统切换到ubuntu24的样子,然后也是让升级&#xff0c;又烦的不行&#xff0c;然后切换到ubuntu server版本&#xff0c;感觉用起来要舒服些了&#xff0c;至少不会天天让升级。 回到标…...

编程日记 2025/6/21 22:46:38

牛客网NC22157:牛牛学数列2

牛客网NC22157:牛牛学数列2 &#x1f4dd; 题目描述 &#x1f50d; 输入输出说明 输入描述&#xff1a; 输入一个整数 N&#xff0c;范围在 0 到 1000 输出描述&#xff1a; 输出一个保留6位小数的浮点数 示例&#xff1a; 输入&#xff1a;2输出&#xff1a;1.500000 …...

编程日记 2025/5/29 10:42:24

智能手表集成测试报告（Integration Test Report）

&#x1f4c4; 智能手表集成测试报告&#xff08;Integration Test Report&#xff09; 项目名称&#xff1a;Aurora Watch S1 测试阶段&#xff1a;系统集成测试 测试周期&#xff1a;2025年xx月xx日 – 2025年xx月xx日 报告编号&#xff1a;AW-S1-ITR-2025-001 版本&#xf…...

编程日记 2025/6/21 23:14:00

1C:ENTERPRISE 8.3 实用开发者指南-示例和标准技术（Session1-Session3）

1C:ENTERPRISE 8.3&#xff08;1课-3课&#xff09; 本博客是全网首个关于1C:Enterprice的中文指南&#xff0c;支持快速吸收使用 1C:Enterprise 8.3 软件开发和调整应用程序的技术 在这篇博客中我会基于实际应用示例&#xff0c;演示各种系统对象的结构、功能和用法。使用内…...

编程日记 2025/6/21 22:29:28

AgenticSeek开源的完全本地的 Manus AI。无需 API，享受一个自主代理，它可以思考、浏览 Web 和编码，只需支付电费。

​一、软件介绍 文末提供程序和源码下载 AgenticSeek开源的完全本地的 Manus AI。无需 API&#xff0c;享受一个自主代理&#xff0c;它可以思考、浏览 Web 和编码&#xff0c;只需支付电费。这款支持语音的 AI 助手是 Manus AI 的 100% 本地替代品 &#xff0c;可自主浏览网页…...

编程日记 2025/5/20 18:33:18

Java类一文分解:JavaBean,工具类,测试类的深度剖析

解锁Java类的神秘面纱&#xff1a;从JavaBean到测试类的深度剖析 前言一、JavaBean 类&#xff1a;数据的守护者&#xff08;一&#xff09;JavaBean 类是什么&#xff08;二&#xff09;JavaBean 类的特征&#xff08;三&#xff09;JavaBean 类的使用场景&#xff08;四&…...

编程日记 2025/6/21 22:54:06

2025认证杯数学建模第二阶段C题：化工厂生产流程的预测和控制，思路+模型+代码

2025认证杯数学建模第二阶段思路模型代码&#xff0c;详细内容见文末名片 一、探秘化工世界&#xff1a;问题背景大揭秘 在 2025 年 “认证杯”数学中国数学建模网络挑战赛第二阶段 C 题中&#xff0c;我们一头扎进了神秘又复杂的化工厂生产流程预测与控制领域。想象一下&…...

编程日记 2025/6/21 22:49:09

day 17 无监督学习之聚类算法

一、聚类流程 1. 利用聚类发现数据模式 无监督算法中的聚类&#xff0c;目的就是将数据点划分成不同的组或 “簇”&#xff0c;使得同一簇内的数据点相似度较高&#xff0c;而不同簇的数据点相似度较低&#xff0c;从而发现数据中隐藏的模式。 2. 对聚类后的类别特征进行可视…...

编程日记 2025/5/29 11:53:06

渗透测试流程-上篇

#作者&#xff1a;允砸儿 #日期&#xff1a;乙巳青蛇年 四月十八 本期就开始进入到网安的内容了笔者会和大家一起开始实操练习。在此之前笔者的老师和我说要知己知彼&#xff0c;胆大心细。笔者也把他的理念传出去&#xff0c;网安的知识比较复杂且使用的工具很多。笔者看过…...

编程日记 2025/5/25 18:35:53

Ubuntu离线安装Minio

MinIO 支持在 Linux 环境下离线安装&#xff0c;非常适合内网或无法联网的服务器环境。下面是详细的 Linux 离线安装 MinIO 服务端 的步骤&#xff1a; ✅ 一、准备工作 1. 创建安装目录&#xff08;可选&#xff09; mkdir -p /opt/minio cd /opt/minio2. 下载 MinIO 可执行…...

编程日记 2025/6/21 23:32:01

2025年山东省数学建模F题思路

2025年山东省数学建模F题思路 一、问题背景 在现代金融市场中&#xff0c;资产价格波动呈现出非线性、高噪声、强跨市场联动性等复杂动态特征。例如&#xff0c;2020年新冠疫情期间&#xff0c;美股数次熔断事件引发全球股市剧烈震荡&#xff1b;而2023年美元加息周期&#x…...

编程日记 2025/6/21 22:55:15

C++核心编程--3 函数提高

函数的一些高级用法。 3.1 函数形参默认值 C中&#xff0c;函数的形参可以有默认值&#xff0c;调用函数时&#xff0c;未进行赋值的形参会使用默认值 void func(int f_var1 10, int f_var2 20); // 声明 ​ void func(int f_var1, int f_var2) // 定义 {std::cout <&l…...

编程日记 2025/6/1 18:38:08

AI Agent开发第67课-彻底消除RAG知识库幻觉(1)-文档分块全技巧

开篇 在上篇《AI Agent开发第66课-彻底消除RAG知识库幻觉-带推理的RAG》放出后，网友们反响很大。有得告诉我：原来还有Rewrite这么一招？早知道这一招很多之前的一些遗留问题都能解决了。不过在上一篇结尾我已经提到了，要真正解决一个AI Agent在响应时产生的幻觉我们用提示语…...

编程日记 2025/6/1 15:46:48

c++多态面试题之（析构函数与虚函数）

有以下问题展开 析构函数要不要定义成虚函数&#xff1f;基类的析构函数要不要定义成虚函数&#xff1f;如果不定义会有什么问题&#xff0c;定义了在什么场景下起作用。 1. 基类析构函数何时必须定义为虚函数&#xff1f; 当且仅当通过基类指针&#xff08;或引用&#xff09;…...

编程日记 2025/5/29 13:12:18

buildroot使用外部编译链编译bluez蓝牙工具

buildroot使用外部编译链编译bluez蓝牙工具 主要参见这个csdn buildroot使用外部编译链编译bluez蓝牙工具_bluez编译-CSDN博客 设置交叉编译工具路径时&#xff0c;设置到bin目录之前 如果menuconfig不能改路径&#xff0c;就去 .config下去改 这样才能编译过...

编程日记 2025/5/26 7:39:36

自定义类型：结构体

1.结构体类型的声明 1.1.1结构的声明 struct tag {member-list; }variable-list; 描述一个学生&#xff1a;只包含了学生的名字、年龄、性别、学号 struct Stu {char name[20];//名字int age;//年龄char sex[5];//性别char id[20];//学号 }; 1.1.2 结构体变量的创建和初始…...

编程日记 2025/6/4 7:47:01

以项目的方式学QT开发C++（一）——超详细讲解（120000多字详细讲解，涵盖qt大量知识）逐步更新！

以项目的方式学QT开发 以项目的方式学QT开发 P1 QT介绍 1.1 QT简介 1.2 QT安装 1.2.1 Windows QT安装 1.2.2 QT Creator 使用基本介绍 P2 C基础 2.1 命名空间 2.1.1 命名空间作用 2.1.2 自定义命名空间 2.2 从C语言快速入门 2.2.1 输入输出 2.2.2 基…...

编程日记 2025/5/30 17:13:50

Spring框架的事务管理

引言 在企业级应用开发中&#xff0c;事务管理是一个至关重要的环节&#xff0c;它确保了数据的一致性和完整性。Spring 框架为我们提供了强大而灵活的事务管理功能&#xff0c;能够帮助开发者更轻松地处理复杂的事务场景。本文将深入探讨 Spring 框架的事务管理&#xff0c;包…...

编程日记 2025/5/27 15:29:23

TypeScript：类

一、基本概念 TypeScript 类是基于 ES6 类的语法扩展&#xff0c;增加了类型注解和访问修饰符等特性&#xff0c;提供了更强大的面向对象编程能力。 二、基本语法 class Person {name: string;age: number;constructor(name: string, age: number) {this.name name;this.ag…...

编程日记 2025/5/25 0:31:27

Python继承

在Python编程中&#xff0c;继承是一个让新手又爱又怕的概念。今天我们就来聊聊这个看似高深实则简单的特性&#xff0c;保证让你看完后能拍着胸脯说&#xff1a;“继承嘛&#xff0c;小菜一碟&#xff01;” 一、什么是继承&#xff1f; 想象一下你正在玩一个养成游戏。你创…...

编程日记 2025/5/31 14:38:25

浏览器宝塔访问不了给的面板地址

注意你们的端口&#xff0c;服务器的端口开放了没&#xff01;&#xff01;&#xff01;宝塔给的端口是否在范围之内&#xff01;&#xff01; 我的当时是1000/10000 &#xff08;阿里云服务器&#xff09; 但是宝塔给的是 4W多 对不上&#xff01;&#xff01; 更换安全组…...

编程日记 2025/5/28 13:16:26

强化学习入门：马尔科夫奖励过程

文章目录 前言1、组成部分2、应用例子3、马尔科夫奖励过程总结 前言 最近想开一个关于强化学习专栏&#xff0c;因为DeepSeek-R1很火&#xff0c;但本人对于LLM连门都没入。因此&#xff0c;只是记录一些类似的读书笔记&#xff0c;内容不深&#xff0c;大多数只是一些概念的东…...

编程日记 2025/5/24 1:25:00

RHCE实验：通过脚本判断用户是否存在

一、实验要求 1、 写一个脚本&#xff0c;使用函数完成 1 、函数能够接受一个参数&#xff0c;参数为用户名&#xff1b; 判断一个用户是否存在 如果存在&#xff0c; 就返回此用户的 shell 和 UID &#xff1b;并返回正常状态值&#xff1b; 如果不存在&#xff0c;就说此用…...

编程日记 2025/5/29 21:22:47

Windows软件插件-音视频捕获

下载本插件 音视频捕获就是获取电脑外接的话筒&#xff0c;摄像头&#xff0c;或线路输入的音频和视频。 本插件捕获电脑外接的音频和视频。最多可以同时获取4个视频源和4个音频源。插件可以在win32和MFC程序中使用。 使用方法 首先&#xff0c;加载本“捕获”DLL&#xff0c…...

编程日记 2025/5/19 13:40:26

每日算法 - 【Swift 算法】Two Sum 问题：从暴力解法到最优解法的演进

【Swift 算法】Two Sum 问题&#xff1a;从暴力解法到最优解法的演进 本文通过“Two Sum”问题&#xff0c;带你了解如何从最直观的暴力解法&#xff0c;逐步优化到高效的哈希表解法&#xff0c;并对两者进行对比&#xff0c;适合算法入门和面试准备。 &#x1f4a1; 问题描述 …...

编程日记 2025/5/31 15:23:45

2025年，如何制作并部署一个完整的个人博客网站

欢迎访问我的个人博客网站&#xff1a;欢迎来到Turnin的个人博客 github开源地址&#xff1a;https://github.com/Re-restart/my_website 前言 2024年年初&#xff0c;从dji实习回来之后&#xff0c;我一直想着拓宽自己的知识边界。在那里我发现虽然大家不用java&#xff0c;…...

编程日记 2025/5/19 14:14:38

深度学习框架---TensorFlow概览

一、TensorFlow 概述 1. 发展历程 1.x 版本&#xff1a;基于静态图&#xff08;Graph&#xff09;和会话&#xff08;Session&#xff09;&#xff0c;需预先定义计算图&#xff0c;调试较复杂。2.x 版本&#xff1a;默认启用动态图&#xff08;Eager Execution&#xff09;&…...

编程日记 2025/5/28 7:40:03