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

CSS：元素显示模式与背景

news 来源：原创 2025/8/13 3:17:10

元素显示模式

元素显示模式是指元素在浏览器页面中显示的模式，比如<div></div>是独占一行的块级元素，<span></span>是行内元素

元素显示模式分为三大类：

块级元素
行内元素
行内块元素

块级元素 block

常见的块级元素有：<h1> - -<h6> ,<p>,<ul>,<ol>,<li>,<div>

块级元素的特点：

独占一行
可以控制宽高，内外边距
宽度默认值为父级元素的100%
内部可以放其它块级和行内元素

但是当块级元素是文本的块级元素时，那么就html就规定不能这样使用，如果我们一定要这样使用那么浏览器会自动修改我的的代码

演示代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>我是左边的文本<div>我是中间的文本</div>我是右边的文本</p>换一行<p>我是左边的文本<div>我是中间的文本</div>我是右边的文本</p>
</body>
</html>

演示结果

我们可以看到这里的<div></div>被分离了出来，然后在前面和后面添加了<p></p>，所以对这种文本元素，我们不能将块级元素放在块级元素里

行内元素inline

常见的行内元素有：<a>，<strong>，<b>，<em>，<del>，<span>等

行内元素的特点：

一行能放多个行内元素
不能设置宽高，设置了也无效，只能通过设置大小来改变宽高
只能包含文本和其它行内元素

我们来演示一下修改行内元素大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span style="font-size: 50px;">我是一段文本</span>
</body>
</html>

演示结果

行内块元素inline-block

常见的行内块元素有：<img> <input> <td>等

元素特点

一行内可以有多个行内块元素
默认宽度是本身的宽度(块级的默认宽度是继承父级的)
可以控制宽高和内外边距

元素显示模式对比

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高	父级容器的100%	可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽高	由内容撑开	只能容纳文本或者其它行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽高	由内容撑开	-

元素显示模式转换display

CSS提供了一个display给我们来定义它的元素显示类型

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p style="display: inline;">Hello,World!!!</p><p style="display: inline;">Hello,World!!!</p><p style="display: inline;">Hello,World!!!</p><p style="display: inline;">Hello,World!!!</p>
</body>
</html>

演示结果

我们可以将块级元素转化成行内元素，可以将行内元素转换成块级元素，这里会涉及很多问题，但是我们就提一个

即使块级元素转换成了行内元素，块级元素转成行内元素也不能在里面加块级元素

演示代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span><div>Hello,World!!!</div></span><p style="display: inline;"><div>Hello,World!!!</div></p>
</body>
</html>

演示结果

我们这里两块代码有所不同，虽然都是行内元素包含块元素，但是因为是转化过的仍然不能包含

背景属性

背景颜色

背景颜色格式

background-color: 背景颜色;

可以用来更改标签内容在浏览器上的背景颜色

演示代码

<!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>div{background-color:blueviolet ;}</style>
</head>
<body><div>Hello,World!!!</div>
</body>
</html>

演示结果

我们可以看到整个div的背景颜色变成了紫色

图片背景

我们的图片也可以作为文本的背景，我们可以设置图片背景的长宽

background-image: url(图片地址);
background-size: 200px;
height: 200px;
width: 200px;

url：后面的括号需要包括所使用图片的路径或地址

background-size：是用来设置图片的大小，后面的参数单位是px

height：用来设置显示图片的高度

width：用来设置显示图片的长度

演示代码

<!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>.bgi .one{background-image:url(9bilibili1.jpg);background-size: 400px;height: 150px;width: 200px;}</style>
</head>
<body><div class="bgi"><div class="one">Hello,World!!!</div></div>
</body>
</html>

演示结果

背景平铺

图片平铺的基本格式

background-image:url(9bilibili1.jpg);
background-size: 20px;;
height: 900px;
background-repeat: repeat;

其中background-repeat是设置图片铺设的方式，一般默认是repeat，常用的参数有四个

repeat：将X轴方向和Y轴方向铺满
repeat-x：将X轴方向铺满
repeat-y：将Y轴方向铺满
no-repeat：不铺设

代码演示

这里我们只演示repeat-x和repeat-y

<!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>.bgi .one{background-image:url(9bilibili1.jpg);background-size: 20px;;height: 900px;background-repeat: repeat-y;}.bgi .two{background-image:url(R-C.png);background-size: 20px;;height: 900px;background-repeat: repeat-x;}</style>
</head>
<body><div class="bgi"><div class="one">Hello,World!!!</div><div class="two">Hello,World!!!</div></div>
</body>
</html>

演示结果

这里有两个背景图片分别向X轴和Y轴方向平铺

背景位置

background-position:X Y

X 和 Y一共有三个种类

方位名词：left top right bottom

精确单位：百分比(%)或精确坐标(px)

混合单位：同时包含方位名词和精确单位

我们来尝试一下混合单位

演示代码

<!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>.bgi .one{background-image:url(9bilibili1.jpg);background-size: 30px;;height: 900px;background-position: 100px center;background-repeat: no-repeat;}</style>
</head>
<body><div class="bgi"><div class="one">Hello,World!!!</div></div>
</body>
</html>

演示结果

这张背景图以左上角为远点向右偏移100px然后居中

注意事项

如果X和Y都是方位名词，那么谁在前谁在后都一样
如果只给了一个参数，那么默认另一个参数都是居中
如果X给了一个精确单位，那么Y一定是Y轴
如果X给了一个方位名词，那么Y一定也是Y轴

背景附着

background-attachment: scroll | fixed | local;

三个参数讲解

scroll：背景图片会随着元素内容一起滚动（默认）
fixed：背景图片相对于视口固定
local：背景图片相对于元素内容固定

这里就不好演示了

CSS：元素显示模式与背景

元素显示模式元素显示模式是指元素在浏览器页面中显示的模式，比如<div></div>是独占一行的块级元素，<span></span>是行内元素元素显示模式分为三大类： 块级元素行内元素行内块元素块级元素 block 常见的块级…...

编程日记 2025/8/13 3:17:10

Java游戏服务器开发流水账(2)开发中Maven的管理

Maven 是一款流行的 Java 项目管理工具，它基于项目对象模型（Project Object Model，POM）的概念来管理项目的构建、依赖和文档等。游戏服务器开发中也会使用. 项目构建生命周期管理：Maven 定义了一套清晰的项目构建生…...

编程日记 2025/8/8 7:37:54

学习设计模式《八》——原型模式

一、基础概念原型模式的本质是【克隆生成对象】； 原型模式的定义：用原型实例指定创建对象的种类，并通过拷贝这些原型创建新的对象。原型模式的功能： 1、通过克隆来创建新的对象实例； 2、为克隆出来的新对象实例复制…...

编程日记 2025/8/13 3:15:35

【MySQL】存储引擎 - MEMORY详解

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/8/8 7:37:50

正则表达式实用指南：原理、场景、优化与引擎对比

正则表达式实用指南：原理、场景、优化与引擎对比正则表达式（Regular Expression，简称 regex 或 regexp）是程序员处理文本数据时不可或缺的“瑞士军刀”。无论是表单校验、日志分析、数据清洗，还是敏感信息脱敏&#…...

编程日记 2025/8/7 7:44:08

Python3正则表达式：字符串魔法师的指南[特殊字符]‍♂️

Python3正则表达式什么是正则表达式？在Python中使用正则表达式一、正则表达式基础语法：你的魔法咒语基本匹配符字符类：性格各异的字符们预定义字符类：常见角色的快捷方式重复限定符：贪婪的收集者贪婪vs非贪婪&#xf…...

编程日记 2025/8/8 7:37:45

k8s术语之CronJob

CronJob管理基于时间的Job，即： 在给定时间点只运行一次周期性地在给定时间点运行一个CronJob对象类似于crontab文件中的一行。它根据指定的预定计划周期地运行一个Job,格式可以参考Cron 前提条件当前使用地Kubernetes集群，版本>1.8.对…...

编程日记 2025/8/13 3:15:05

常见的提示词攻击方法和防御手段——提示词注入（Prompt Injection）攻击解析

提示词注入（Prompt Injection）攻击解析提示词注入是一种针对大型语言模型（LLM）的新型攻击手段，攻击者通过精心设计的输入文本（提示词）操控AI模型的输出，使其执行非预期行为或泄露敏…...

编程日记 2025/8/8 7:37:41

软件逆向工程核心技术：脱壳原理与实战分析

目录一、脱壳技术概述：从保护到还原的逆向之旅 1.1 脱壳技术的本质与核心价值 1.2 壳的分类与核心技术解析 1.3 学习路径：从压缩壳到加密壳的渐进式突破二、脱壳三步法：系统化逆向工程框架 2.1 核心流程总览 2.2 实战案例&#xff1…...

编程日记 2025/8/13 3:15:06

C27-简单选择排序法

一基本思想每轮从待排序序列中选出最小或最大的元素,与待排序区间起始位置交换,逐步缩小待排序区间二算法实现遍历数组:设数组长度为n,外层循环i从0到n-2(共n-1轮) 找最小值下标:内层循环j从i1到n-1,遍历待排序区间(i到n-1),记录找最小值下标min 交换元素:将arr[i]与a…...

编程日记 2025/8/8 7:37:37

【Redis】持久化与事务

文章目录 1. 持久化1.1 RDB(定期)1.1.1 触发方式1.1.2 触发流程 1.2. AOF(实时)1.2.1 设置AOF1.2.2 刷新策略1.2.3 重写机制 2. 事务2.1 redis事务概念2.2 事务操作 Mysql有几个特性： 原子性一致性隔离性，redis是串行的，自带隔离性持久性&…...

编程日记 2025/8/8 7:37:35

Web 自动化之 HTML JavaScript 详解

文章目录一、HTML 常用标签二、javascript 脚本1、什么是 javascript(js)2、 js变量和函数3、js 弹窗处理4、js 流程控制语句和 switch 结构语句应用一、HTML 常用标签 HTML：超文本标记语言超文本：不仅只包含文字，还有超链接、视频…这些…...

编程日记 2025/8/8 7:37:32

【JavaScript】二十九、垃圾回收 + 闭包 + 变量提升

文章目录 1、作用域1.1 局部作用域1.2 全局作用域1.3 作用域链 2、JC垃圾回收机制♻️3、GC算法3.1 引用计数法3.2 标记清除法 4、闭包4.1 定义4.2 闭包的应用：实现数据的私有 5、变量提升 1、作用域即一个范围，离开了这个范围，这个变量就不…...

编程日记 2025/8/13 3:15:07

Python在自动驾驶实时数据处理中的应用：让AI驾驶更智能、更高效

Python在自动驾驶实时数据处理中的应用：让AI驾驶更智能、更高效近年来，自动驾驶技术的飞速发展离不开人工智能和数据处理的支撑，而Python作为AI与数据分析的核心编程语言，在自动驾驶实时数据处理方面扮演着不可或缺的角色。从传感器数据解析，到路径规划与决策优化，再到…...

编程日记 2025/8/13 3:13:52

功能安全的关键——MCU锁步核技术全解析（含真实应用方案）

随着智能汽车的发展，整车对功能安全的要求越来越高。特别是像电动助力转向（EPS）、制动控制系统、气囊控制器这类对“出错零容忍”的系统，已经广泛采用一种重要的安全架构——锁步核（Lockstep Core）。今天我…...

编程日记 2025/8/13 3:15:33

Java实现桶排序算法

1. 桶排序原理图解桶排序是一种基于分桶思想的非比较排序算法，适用于数据分布较为均匀的场景。其核心思想是将数据分散到有限数量的“桶”中，每个桶再分别进行排序（通常使用插入排序或其他简单的排序算法）。以下是桶排序的步骤&a…...

编程日记 2025/8/13 3:12:33

剖析 FFmpeg：从基本功能到过滤器，实现音视频处理的灵活性

目录 1.解复用2 解码2.1 音频解码2.2 视频解码 3 修饰3.1 avio3.2 重采样 4 过滤器4.1 过滤器基本知识4.2 简单过滤器4.3 复杂滤镜图 1.解复用解复用就是把容器中的媒体流分离出来，方便我们对媒体流处理。 step1：对媒体文件上下文初始化 AVFormatCont…...

编程日记 2025/8/8 7:37:21

maven如何搭建自己的私服(LINUX版)？

环境准备安装 JDK ：确保系统已安装 JDK 8 或更高版本。可以通过以下命令安装 JDK： 安装 OpenJDK ：sudo apt update && sudo apt install openjdk-11-jdk 安装 Oracle JDK ：需要添加第三方仓库，例如 WebUpd8 …...

编程日记 2025/8/8 7:37:19

机器视觉的手机FPC油墨丝印应用

在现代智能手机制造过程中，精密的组件装配和质量控制是确保产品性能和用户体验的关键。其中，柔性印刷电路板（FPC）的油墨丝印工艺尤为关键，它不仅影响到电路板的美观，更直接关系到电路的导电性能和可靠性。而…...

编程日记 2025/8/8 7:37:17

AI原生手机：三大技术阵营的终极对决与未来展望

引言：AI手机时代的真正到来 2024年，智能手机行业迎来了一个历史性转折点——AI原生手机从概念走向主流。根据IDC最新报告，中国AI手机出货量同比激增591%，渗透率从2023年的3%飙升至22%。这一数据背后，是手机厂商在硬件…...

编程日记 2025/8/13 3:13:53

CFCA受邀参加盛京银行手机银行7.0发布会

4月30日，盛京银行举办手机银行7.0发布会。盛京银行手机银行7.0围绕“慧享生活，财富随行”主题，聚焦便捷体验、财富管理、惠民生活，构建12大类服务，升级142项功能，全新设置信用卡频道，推出“云…...

编程日记 2025/8/13 3:13:53

IT/OT 融合架构下的工业控制系统安全攻防实战研究

1. 引言随着工业 4.0 和智能制造的浪潮席卷全球，信息技术 (IT) 与运营技术 (OT) 的融合已成为不可逆转的趋势。这种融合旨在通过实时数据交换和分析，打破传统的信息孤岛，显著提升生产效率、优化决策、降低运营成本并增强市场竞争力。IT 系统…...

编程日记 2025/8/8 7:37:09

AI优化高频PCB信号完整性：猎板PCB的技术突破与应用实践

随着5G通信、AI服务器及新能源汽车的快速发展，高频PCB的信号完整性已成为决定电子产品性能的关键。本文以猎板PCB的技术实践为例，解析如何通过AI算法与精密制造工艺的结合，实现高频信号传输的极致优化，为行业提供高可靠性的解决方…...

编程日记 2025/8/13 3:15:07

【Bluedroid】蓝牙 SDP（服务发现协议）模块代码解析与流程梳理

本文深入剖析Bluedroid蓝牙协议栈中 SDP（服务发现协议）服务记录的全生命周期管理流程，涵盖初始化、记录创建、服务搜索、记录删除等核心环节。通过解析代码逻辑与数据结构，揭示各模块间的协作机制，包括线程安全设计、回…...

编程日记 2025/8/8 7:37:06

obj = null；赋值null之前没有其他引用指向obj对象，那么，当obj=null时，会被垃圾回收机制立即回收吗？

不会立即回收。具体原因是： 赋值 obj null; 后，对象变成“不可达”，符合垃圾回收条件，但垃圾回收器并不会立刻回收它。垃圾回收是CLR自动控制的非确定性过程，什么时候执行回收取决于系统内存压力、GC策略、分代情况…...

编程日记 2025/8/10 10:55:49

Android 数据持久化之文件存储

在 Android 开发中，存储文件是一个常见的需求。本文中介绍 openFileOutput 和 File 两种不同的方式来操作文件。一、File 方式根据文件的存储位置和访问权限，可以将文件存储分为内部存储（Internal Storage）和外部存储&#x…...

编程日记 2025/8/8 7:37:02

差分OPA verilogaA 模型

做电路设计，需要提前用理想模型如VerilogA模型做验证。这里分享一个由ahdlib库里单端opamp改造而来的差分opamp。参考何乐年的《模拟集成电路设计与仿真》10.4节423页； 描述的小信号模型如上。 VerilogA 用到了SRI/C，GBWgm/C,gaingm*r1等概念…...

编程日记 2025/8/8 7:37:00

oracle goldengate非并行进程转换为并行进程

oracle goldengate非并行进程转换为并行进程在上一期的文章中写道了直接创建并行进程的方式对大事务进行分解，这对于新建立同步进程的时候提前规划是很有帮助的，但是如果对已经进行了同步的进程重新建立需要耗时比较长，Oracle提供了非并行进…...

编程日记 2025/8/8 7:36:58

58.[前端开发-前端工程化]Day05-webpack-Git安装-配置-Git命令

Git版本控制工具详解 1 邂逅版本控制工具认识版本控制（版本控制） 版本控制的功能版本控制的历史 2 集中式和分布式区别集中式版本控制分布式版本控制 3 Git的环境安装搭建 Git的安装 Bash – CMD – GUI 区别 Git的配置分类 Git的配置选项 Git的…...

编程日记 2025/8/8 7:36:56

CF每日5题

每日刷题两小时颐养天年 1855A 800 思维将不高兴的同学计数cnt 不高兴的同学之间两两交换，一定不会在 p i i p_ii pii的位置上，贡献是cnt/2 如果cnt%2>0，那就多交换一次 void solve() {int n;cin>>n;int cnt0;forr(i,1,n){in…...

编程日记 2025/8/8 7:36:53

Redis实现分布式获取全局唯一自增ID的案例。

【1】简易自增版本(从 1 开始 1,2,3，...) 项目结构下面是一个基于 RedisTemplate 实现的分布式全局唯一自增 ID 生成器的案例。适用于 Java Spring Boot 环境，利用 Redis 的原子操作 INCR 指令。 ✅ 原理说明 Redis 提供的 INCR 命令是原子性的&…...

编程日记 2025/8/8 7:36:51

创建型模式：工厂方法（Factory Method）模式

一、简介工厂方法（Factory Method）模式是一种创建型设计模式，它定义了一个创建对象的接口，但让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。在 C# 中，工厂方法模式提供了一种更灵活的对象创建方式，将对象的创建和使用分离，提高了代码的可维护性和…...

编程日记 2025/8/8 7:36:49

大型语言模型在网络安全领域的应用综述

大型语言模型在网络安全领域的应用综述简介1. 引言1.1 背景与意义1.2 LLMs 的基本概念1.3 LLMs 在网络安全中的优势1.4 报告目标 2. 文献综述方法2.1 研究问题2.2 文献检索策略2.3 文献筛选标准 3. LLMs 在网络安全领域的应用3.1 软件和系统安全 (Software and System Securit…...

编程日记 2025/8/8 9:42:47

TDEngine 与 Grafana

目录实践目录 Grafana 参考文档实践目录 10.60.100.194：/home/dualven/tdengine Grafana systemctl status grafana-server http://10.60.100.194:3000/ 这个端口与mydoor的new server服务冲突 （同时只开一个） 参考文档运行监…...

编程日记 2025/8/8 6:12:47

iPhone手机连接WiFi异常解决方法

iPhone手机连接WiFi异常解决方法一、问题现象二、iPhone连不上可能的原因三、基础排查与快速修复第一步：重启大法第二步：忽略网络，重新认证第三步：关闭“私有无线局域网地址”第四步：修改DNS服务器第五步：还原网络设置四、路由器端排查及设置关闭MAC地址过滤或添加到白名…...

编程日记 2025/8/8 9:42:45

微服务不注册到nacos的方法

引言:在开发中,有时候多个开发一起开发,可能会同时注册到dev环境中,这样可能会影响dev环境,那么在idea添加2个参数即可解决 spring.cloud.nacos.discovery.register-enabled falsespring.cloud.nacos.discovery.enabled false...

编程日记 2025/8/8 4:59:45

Spring Boot + Vue 实现在线视频教育平台

一、项目技术选型前端技术： HTML CSS JavaScript Vue.js 前端框架后端技术： Spring Boot 轻量级后端框架 MyBatis 持久层框架数据库： MySQL 5.x / 8.0 开发环境： IDE：Eclipse / IntelliJ IDEA JDK&…...

编程日记 2025/8/8 9:42:43

【嵌入式开发-SPI】

嵌入式开发-SPI ■ SPI简介■ SPI （Standard SPI）■ DSPI （Dual SPI）■ QSPI是 Queued SPI的简写 ■ SPI简介 SPI协议其实是包括：Standard SPI、Dual SPI和Queued SPI三种协议接口，分别对应3-wire, 4-wire…...

编程日记 2025/8/8 9:42:41

【链表扫盲】FROM GPT

链表是一种线性数据结构，由节点（Node）组成，每个节点包含两个部分： 数据域（data）： 存储节点值。指针域（next）： 存储指向下一个节点的引用。链表…...

编程日记 2025/8/8 9:42:40

如何在macOS上通过SSHFS挂载远程文件系统

在macOS系统中，想要便捷地访问远程计算机上的目录？借助SSH文件系统（SSHFS）就能轻松实现。SSHFS是一款文件系统客户端，它基于SSH文件传输协议（SFTP）建立安全连接，进而实现对远程文件的…...

编程日记 2025/8/8 9:42:38

Android studio profiler使用

主要讲内存泄露排查 1、把怀疑内存泄露的页面都跑一边，然后回到初始页面 2、打开profile的home，找到Analysis Memory Usage，点击右下角start profiler task，开始分析内存，等待分析完成，分析过程中页面是卡…...

编程日记 2025/8/8 9:42:36

排序算法-选择排序

选择排序是一种简单直观的排序算法，其核心思想是每次从未排序的部分中选出最小（或最大）的元素，放到已排序部分的末尾。选择排序步骤初始化：将序列分为已排序部分（初始为空）和未排序部分&…...

编程日记 2025/8/8 9:42:34

云计算的基础概论

一、云计算基础概念 1. 云计算定义 • 英文：Cloud Computing • 定义：通过互联网（Internet）按需提供可扩展的计算资源（如服务器、存储、数据库、网络、软件等），用户无需管理底层基础设施。 …...

编程日记 2025/8/8 9:42:32

仿LISP运算 - 华为OD机试真题(A卷、JavaScript题解)

华为OD机试题库《C》限时优惠 9.9 华为OD机试题库《Python》限时优惠 9.9 华为OD机试题库《JavaScript》限时优惠 9.9 针对刷题难，效率慢，我们提供一对一算法辅导， 针对个人情况定制化的提高计划（全称1V1效率更高）。看…...

编程日记 2025/8/8 9:42:31

数据透视表控件DHTMLX Pivot v2.1发布，新增HTML 模板、增强样式等多个功能

DHTMLX Pivot数据透视表能快速地对数据进行计数、总计、平均和执行许多其他操作。近日，DHTMLX Pivot发布了2.1版本，该版本扩展了开发人员通过新增的 CSS 样式选项、HTML 模板以及数字和日期的自定义格式修改表格外观的能力。此外，该版本还增加…...

编程日记 2025/8/8 9:42:29

简易的考试系统设计（Web实验）

简易的考试系统设计（Web实验） 1.实验内容与设计思想（一）实验需求（二）设计思路 2.代码展示3.实验小结 1.实验内容与设计思想 （一）实验需求 1.编写两个页面程序，一个HTML…...

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

C++之set和map的运用

目录序列式容器和关联式容器熟识set 在STL中的底层结构： set的构造和迭代器 set的增删查 multiset和set的差异练习题： 熟识map map类的介绍 pair类型介绍 map的构造 map的增删查 map的数据修改测试样例： multimap和map的差…...

编程日记 2025/8/8 9:42:25

基于智能家居项目 RGB彩灯（P9813）

一、P9813 是什么？ P9813 是一颗专门用来控制 RGB LED灯珠的芯片，也就是说，它能控制红色、绿色、蓝色三种灯光的亮度，从而调出各种颜色。它最常见的用途就是在各种“会变色”的灯带中。它的通信方式非常简单，只需要…...

编程日记 2025/8/8 9:42:24

EMQX 作为 MQTT Broker，支持 MQTT over TCP 和 MQTT over WebSocket 两种协议

1. EMQX 支持的协议与端口协议类型默认端口用途说明MQTT over TCP1883标准的 MQTT 协议，基于 TCP 传输（用于后端服务、物联网设备等）。MQTT over TLS8883加密的 MQTT over TCP（TLS/SSL 加密，安全性更高&am…...

编程日记 2025/8/8 9:42:22

软件测试学习笔记

第1章绪论软件测试本质上说，就是寻找软件的缺陷、错误，对其质量度量的方法与过程。软件测试的一切活动都围绕着两个目标（验证是否符合需求，识别差异）而行进。它是测试思维、策略方针、设计实施的基本出发点。学…...

编程日记 2025/8/8 9:42:20

元素显示模式

块级元素 block

行内元素inline

行内块元素inline-block

元素显示模式对比

元素显示模式转换display

背景属性

背景颜色

图片背景

背景平铺

背景附着

相关文章：