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

CSS 美化页面（三）

news 来源：原创 2025/8/25 23:34:44

一、盒模型

盒模型本质上是一个盒子，封装周围的HTML元素。包含：外边距，边框，填充，和实际内容

一个盒子由四个区域组成：内容（Content）、内边距（Padding）、外边距（Margin）以及边框（Border）。

有五个属性分别是：width、height、padding、border和margin。具体来说，width和height用于定义内容区域的宽度和高度，而非盒子的整体尺寸

二、盒模型模式

CSS盒模型存在两种不同的模式：标准盒模型与IE盒模型（亦被称为怪异盒模型或替代盒模型）。

1、标准盒模型

所设定的元素宽度和高度仅涵盖内容区域，而内边距、边框以及外边距则被视为额外添加到内容尺寸上的部分。

2、IE盒模型

所设定的宽度和高度理解为包含内容、内边距及边框在内的总和，但并不包含外边距。

height=content_height+padding_height+border_left

width=content_width+padding_width+border_bottom

总之：可以使用 `box-sizing` CSS 属性来控制盒模型的选择，从而影响元素的布局计算。

box-sizing: content-box 指定使用标准盒模型；

box-sizing: border-box 则指定使用IE盒模型；

三、`border`、`margin` 和 `padding` 的区别

属性	作用	位置	示例
border	定义元素的边框，位于内容和外边距之间。	位于内容（或内边距）和外边距之间，包裹元素内容和内边距。	`border: 2px solid #000;` 表示一个宽度为 2px 的黑色实线边框。
margin	定义元素与其他元素之间的外部间距，用于控制元素之间的距离。	位于元素的边框外部，影响元素与其他元素之间的距离。	`margin: 10px;` 表示元素与其他元素之间的距离为 10px。
padding	定义元素内容与边框之间的内部间距，用于控制内容与边框的距离。	位于内容和边框之间，增加内容与边框的距离。	`padding: 10px;` 表示内容与边框之间的距离为 10px。

四、边框border

1、简写语法：

border 是 border-width（宽度）、border-style（样式）、border-color（颜色），顺序可自由组合，用空格分隔。

border:2px solid black;

2、进阶用法：

‌单独控制各方向边框‌
通过 border-top、border-right、border-bottom、border-left 分别设置不同边的样式。

‌圆角边框‌
使用 border-radius 实现圆角效果，值越大圆角弧度越明显。

‌透明边框‌
通过 transparent 隐藏边框但保留占位空间，适用于布局调整。

<!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>#name {/* 设置输入框的大小 */width: 200px;height: 30px;/* 设置输入框的边框和圆角 */border-radius: 5px;/* 设置输入框的边框颜色和样式 4个方向 */border-bottom: 5px solid #4CAF50;border-left: 5px solid #6e408d;border-top: #4CAF50 solid 5px;border-right: #6e408d solid 5px;}form{border: 2px solid #d0e9a3;/* 内边距 */padding: 10px;}div{width:300px;height: 200px;border: 2px solid #a59ace;/* margin: 50px ;   *//* 水平居中 */margin: 50px  auto;   }</style>
</head><body><div><form action="" method="post" id="form1">姓名：<input type="text" name="name" id="name"><br><br>密码：<input type="password" name="password" id="password"><br><br><input type="submit" name="remember" id="remember"></form></div>
</body>

五、内边距padding

1、简写语法：

它是用于设置元素内容与边框（border）之间的内边距，‌支持 1~4 个值‌，有padding-top、padding-right、padding-bottom、padding-left 遵循顺时针方向（上→右→下→左），如图所示：

/* 统一四边内边距 */
.element { padding: 20px; }/* 上下10px + 左右20px */
.element { padding: 10px 20px; }/* 上10px + 右20px + 下30px + 左20px */
.element { padding: 10px 20px 30px; }/* 单独设置四边 */
.element { padding: 10px 20px 5px 15px; }  /* 上 右 下 左 */

2、常见使用场景

1. 内容与边框留白

。。。   <style>.box {width: 300px;border: 2px solid #6f4caf; /* 边框 */padding: 30px; /* 内边距 */background-color: #f0f8ff; /* 背景颜色 */font-size: 16px;}</style>
</head>
<body><div class="box">这是展示内容与边框之间的留白（padding）。</div>
</body>
</html>

2. 按钮/图标内间距

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Padding 示例</title><style>.box {width: 300px;border: 2px solid #6f4caf; /* 边框 */padding: 30px; /* 内边距 */background-color: #f0f8ff; /* 背景颜色 */font-size: 16px;margin-bottom: 20px; /* 与按钮的间距 */}/* 按钮样式 */.button {padding: 10px 20px; /* 上下内边距10px，左右内边距20px */font-size: 16px; /* 字体大小 */color: #fff; /* 字体颜色 */background-color: #6f4caf; /* 按钮背景颜色 */border: none; /* 去掉边框 */border-radius: 5px; /* 圆角 */cursor: pointer; /* 鼠标悬停时显示手型 */transition: background-color 0.3s; /* 背景颜色过渡效果 */}/* 按钮悬停效果 */.button:hover {background-color: #90c3cc; /* 悬停时背景颜色变深 */}/* 图标按钮样式 */.icon-button {padding: 10px; /* 内边距 */font-size: 20px; /* 图标大小 */color: #fff; /* 图标颜色 */background-color: #6f4caf; /* 按钮背景颜色 */border: none; /* 去掉边框 */border-radius: 50%; /* 圆形按钮 */cursor: pointer; /* 鼠标悬停时显示手型 */display: inline-flex; /* 使内容居中 */align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */transition: background-color 0.3s; /* 背景颜色过渡效果 */}/* 图标按钮悬停效果 */.icon-button:hover {background-color: #be4a84; /* 悬停时背景颜色变深 */}</style>
</head>
<body><div class="box">这是展示内容与边框之间的留白（padding）。</div><!-- 普通按钮 --><button class="button">提交</button><!-- 图标按钮 --><button class="icon-button">★</button>
</body>
</html>

3、响应式布局适配

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Padding 百分比示例</title><style>.container {width: 80%; /* 容器宽度为父容器的 80% */margin: 0 auto; /* 居中对齐 */padding: 10%; /* 内边距为容器宽度的 10% */background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #4CAF50; /* 绿色边框 */}</style>
</head>
<body><div class="container">这是一个示例，展示使用百分比设置内边距（padding: 10%;）。</div>
</body>
</html>

4、与背景的关系

‌背景色/图会覆盖 padding 区域‌，但可通过 background-clip 控制

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>background-clip 示例</title><style>.box {width: 300px;padding: 20px; /* 内边距 */border: 5px solid #4CAF50; /* 边框 */background-color: #f0f8ff; /* 浅蓝色背景 */margin-bottom: 20px;}/* 默认值：背景覆盖到边框区域 */.border-box {background-clip: border-box;}/* 背景覆盖到 padding 区域，不覆盖边框 */.padding-box {background-clip: padding-box;}/* 背景仅覆盖内容区域 */.content-box {background-clip: content-box;}</style>
</head>
<body><div class="box border-box">背景覆盖到边框区域（background-clip: border-box）。</div><div class="box padding-box">背景覆盖到 padding 区域（background-clip: padding-box）。</div><div class="box content-box">背景仅覆盖内容区域（background-clip: content-box）。</div>
</body>
</html>

注意：内边距不能是负数哦！！！

六、外边距margin

1、简写语法：

它是用于控制元素与其他元素之间的外边距，‌支持 1~4 个值‌，有margin-top、margin-right、margin-bottom、margin-left 遵循顺时针方向（上→右→下→左）如图同上(内边距)

/* 统一四边外边距 */
.box { margin: 20px; }/* 上下20px + 左右40px */
.box { margin: 20px 40px; }/* 上20px + 右40px + 下60px + 左40px */
.box { margin: 20px 40px 60px; }/* 单独设置四边 */
.box { margin: 10px 20px 30px 40px; }  /* 上 右 下 左 */

2、核心特性与特殊场景

1. ‌百分比值基准

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Margin 百分比示例</title><style>.box {width: 50%; /* 容器宽度为父容器宽度的 50% */height: 100px; /* 固定高度 */margin: 10%;  /* 上下左右外边距为父容器宽度的 10% */background-color: #4CAF50; /* 绿色背景 */}.parent {width: 80%; /* 父容器宽度为视口宽度的 80% */margin: 0 auto; /* 父容器居中 */background-color: #474b4e; /* 浅蓝色背景 */padding: 20px; /* 内边距 */}</style>
</head>
<body><div class="parent"><div class="box"></div></div>
</body>
</html>

2. ‌负值效果

margin-top: -10px：元素向上移动，可能覆盖上方内容‌
margin-left: -20px：元素向左移动，常用于微调布局‌
margin-right: -15px：右侧元素左移，自身宽度不变‌

原始位置

右侧内容左移

向上移动

向左移动

3. ‌auto 自动分配

用于水平居中布局，需配合 width 使用‌

  .parent {width: 80%; /* 父容器宽度为视口宽度的 80% */margin: 0 auto; /* 父容器居中 */background-color: #474b4e; /* 浅蓝色背景 */padding: 20px; /* 内边距 */}

4. ‌外边距合并（Margin Collapse）‌

‌相邻块级元素‌：上下外边距取较大值（非相加）‌
示例：元素 A margin-bottom: 30px，元素 B margin-top: 20px → 实际间距为 30px。
‌父元素与子元素‌：若父元素无 padding 或 border，子元素的垂直外边距会穿透到父元素外部‌

七、综合应用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>.card {width: 300px;margin: 20px auto;  /* 水平居中‌ */padding: 15px;border: 2px solid #c97575;}.card img {margin-bottom: -10px;  /* 图片与下方文字重叠*/}.card p {margin-top: 15px;  /* 实际间距为15px（合并后） */}</style>
</head>
<body><div class="card"><img src="2.jpg" alt="bear" width="60%" height="auto"><p>图片描述文字</p></div></body>
</html>

CSS 美化页面（三）

一、盒模型盒模型本质上是一个盒子，封装周围的HTML元素。包含： 外边距，边框，填充，和实际内容一个盒子由四个区域组成：内容（Content）、内边距（Padding）、外…...

编程日记 2025/8/25 23:34:44

面试题之数据库-mysql高阶及业务场景设计

最近开始面试了，410面试了一家公司针对自己薄弱的面试题库，深入了解下，也应付下面试。在这里先祝愿大家在现有公司好好沉淀，定位好自己的目标，在自己的领域上发光发热，在自己想要的领域上（技术…...

编程日记 2025/8/25 0:47:33

STM32F407实现SD卡的读写功能

文章目录前言一、SDIO简介二、SD卡操作1.读操作2.写数据3.擦除操作4.最终效果5.完整工程前言在STM32中存储空间是有限的，对于需要存储大量数据的项目就需要外扩存储空间，一般会选择FLASH、EEPROM或者SD卡。SD是这三种中可达空间最大的，所…...

编程日记 2025/8/23 8:20:17

Vue 3中的setup【与Vue 2的区别】

一、前言在Vue 3中，setup是组合式API（Composition API）的核心入口函数。其核心作用是为组件提供灵活的逻辑组织方式，解决复杂组件中逻辑碎片化的问题。二、核心作用 1.初始化响应式数据通过ref和reactive等API声明响应式状态…...

编程日记 2025/8/25 23:33:58

基于PySide6的YOLOv8/11目标检测GUI界面——智能安全帽检测系统

📖 前言在工业安全领域，智能安全帽检测是保障工人生命安全的重要技术手段。本文将介绍如何利用YOLOv8/YOLOv11目标检测算法与PySide6 GUI框架，开发一套功能完整的智能安全帽检测系统。系统支持： 动态切换检测模型（Y…...

编程日记 2025/8/19 18:01:11

AF3 generate_chain_data_cache脚本解读

AlphaFold3 generate_chain_data_cache 脚本在源代码的scripts文件夹下。该脚本从指定目录中批量解析 mmCIF/PDB 文件的工具，并将每个链的基本信息（序列、分辨率、是否属于聚类等）提取并写入 JSON 文件，主要用于后续蛋白质建模、过滤或训练数据准备。源代码： import ar…...

编程日记 2025/8/20 9:03:55

C/C++不透明指针

今天在ESP32编程中又看到了这个词，这个词出现在cursor回答中。回答如下： struct esp_netif_obj; typedef struct esp_netif_obj esp_netif_t;esp_netif_obj的具体实现细节被隐藏了用户代码只能通过esp_netif_t类型指针来操作网络接口这种封装方式被称为…...

编程日记 2025/8/25 23:33:56

电力实习中需要注意哪些安全用电问题

电力实习中需要注意哪些安全用电问题在电工实习中，由于涉及到电力设备和电气设施，安全问题尤为重要。以下是电工实习中需要注意的安全问题： 一、电气设备及线路安全使用电气设备前，应确保设备具有良好的电气绝缘&#xff0c…...

编程日记 2025/8/25 9:17:49

【版本控制】git命令使用大全

大家好，我是jstart千语。今天来总结一下git的使用命令，上文会先将git命令都列出来，便于快速寻找，然后还会对部分常用命令图文讲解，适合新手，让你快速地理解。最后还会总结在idea中使用git。如果有缺失的&am…...

编程日记 2025/8/21 1:06:15

Day09【基于Tripletloss实现的简单意图识别对话系统】

基于Tripletloss实现的表示型文本匹配目标数据准备参数配置数据处理Triplet Loss目标Triplet Loss计算公式公式说明模型构建网络结构设计网络训练目标损失函数设计主程序推理预测类初始化加载问答知识库文本向量化知识库查询主程序main测试测试效果参考博客目标在此之前…...

编程日记 2025/8/24 22:21:02

什么是HIGG验厂，HIGG验厂有什么要求？HIGG验厂有什么作用

什么是Higg验厂？ Higg验厂（Higg Facility Environmental Module, FEM & Higg Facility Social & Labor Module, FSLM）是由可持续服装联盟（SAC, Sustainable Apparel Coalition）开发的一套评估工具&#xff0c…...

编程日记 2025/8/17 18:40:06

SmolVLM新模型技术解读笔记

原文地址：https://huggingface.co/blog/zh/smolervlm 一、核心发布概要新成员亮相：推出256M（2.56亿参数）与500M（5亿参数）视觉语言模型关键定位：目前全球最小VLM（256M）…...

编程日记 2025/8/25 23:33:59

解决USG5150防火墙web无法连接问题

参考防火墙usg5500（V300R001C00SPC700）WEB界面无法登陆现象 Web防火墙突然无法web登录，Ping通，但是Tcpping端口不通。无论是从外网、还是内网都一样。 Probing 192.168.100.1:1234/tcp - No response - time2047.528ms Prob…...

编程日记 2025/8/25 23:33:58

Resilience4j与Spring Cloud Gateway整合指南：构建弹性的API网关

什么是Resilience4j？ Resilience4j是一个轻量级的容错库，专为Java 8和函数式编程设计。它借鉴了Netflix Hystrix的设计理念，但更加轻量且专注于Java 8的函数式编程风格。Resilience4j提供了多种容错机制，帮助开发者构建弹性强健的…...

编程日记 2025/8/21 1:31:43

Quipus，LightRag的Go版本的实现

1 项目简介奇谱系统当前版本以知识库为核心，基于知识库可以快构建自己的问答系统。知识库的Rag模块的构建算法是参考了LightRag的算法流程的Go版本优化实现，它可以帮助你快速、准确地构建自己的知识库，搭建属于自己的AI智能助手。与当前LLM…...

编程日记 2025/8/21 4:34:54

怎样完成本地模型知识库检索问答RAG

怎样完成本地模型知识库检索问答RAG 目录怎样完成本地模型知识库检索问答RAG使用密集检索器和系数检索器混合方式完成知识库相似检索1. 导入必要的库2. 加载文档3. 文本分割4. 初始化嵌入模型5. 创建向量数据库6. 初始化大语言模型7. 构建问答链8. 提出问题并检索相关文档9. 合…...

编程日记 2025/8/25 23:32:37

研发效率破局之道阅读总结(2)流程优化

研发效率破局之道阅读总结(2)流程优化 Author: Once Day Date: 2025年4月15日一位热衷于Linux学习和开发的菜鸟，试图谱写一场冒险之旅，也许终点只是一场白日梦… 漫漫长路，有人对你微笑过嘛… 全系列文章可参考专栏: 程序的艺术_Once-Day…...

编程日记 2025/8/22 10:03:37

解决PIP 安装出错ERROR: cp310-cp310-manylinux_2_28_x86_64.whl is not a supported wheel

ERROR: torch-2.8.0.dev20250325cu128-cp310-cp310-manylinux_2_28_x86_64.whl is not a supported wheel on this platform. 可以 pip debug --verbose | grep manylinux | grep cp310 WARNING: This command is only meant for debugging. Do not use this with automation f…...

编程日记 2025/8/25 10:19:20

b站golang后端开发一面

go和其他语言的对比 Golang（也称为Go语言）是一种静态类型、编译型语言，由Google开发，以其简洁、高效和强大的并发处理能力著称。 Golang的设计哲学强调简洁明了。与Python类似，Go语法简洁，易于学习和编写。…...

编程日记 2025/8/25 3:29:26

Vue3 SSR Serverless架构革命：弹性计算与量子加速

一、全维度Serverless SSR架构 1.1 蜂巢式弹性调度系统 1.2 冷启动时间优化表优化策略Node.js冷启(ms)Deno冷启(ms)Bun冷启(ms)裸启动1800960420预编译二进制650380210内存快照预热22016090WASM实例池15011075量子状态预载453832 二、边缘渲染协议升级 2.1 流式SSR响应协议…...

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

深度大脑：AI大模型的设计与运行原理

AI大模型的设计与运行原理涉及多个复杂环节，以下是系统化的总结，结合核心要点与补充细节： 一、AI大模型的设计 1. 深度神经网络架构 Transformer：取代RNN/CNN，解决长程依赖问题。核心组件： 自注意力机制…...

编程日记 2025/8/25 23:32:36

Python网络编程从入门到精通：Socket核心技术+TCP/UDP实战详解

引言网络编程是构建现代分布式系统的核心能力，而Socket作为通信的基石，其重要性不言而喻。本文将从零开始，通过清晰的代码示例、原理剖析和对比分析，带你彻底掌握Python中的Socket编程技术，涵盖TCP可靠连接、UDP高效…...

编程日记 2025/8/19 20:06:34

使用CMake生成Opencv对应库文件

opencv环境配置：版本3.4/3.2(OpenCV-3.4.3) CMake：3.12.1 D:\OpenCv\opencv\build\x64\vc16\bin路径添加至环境变量中 CMake环境配置： D:\Install_QT\bin路径添加至环境变量中（path中即可） QT5环境变量配置&#xff1a…...

编程日记 2025/8/20 14:22:24

MySQL 数据库备份和恢复全指南

MySQL 是一款常用的开源数据库系统，在日常运维中，数据备份和恢复是系统管理的重要一环。本文将细致介绍 MySQL 两大备份方案—— mysqldump 和 XtraBackup，包括备份方式、恢复步骤、定时脚本、远程备份和常见问题处理方案。一、mysqldump 备…...

编程日记 2025/8/25 12:18:58

关于我的服务器

最近我买了台腾讯云服务器，然后新手小白只会用宝塔。。。安装完之后默认的端口是8888，打开面板就会提示我有风险。然后我改了端口之后，怎么都打不开。于是学到了几句命令可以使用： //查看端口是否已经修改成功 cat www/se…...

编程日记 2025/8/22 6:23:44

spring面试题

1，如何理解spring boot中的starter Starter是一种简化依赖管理和自动配置的核心机制，能快速集成特定功能模块，无需手动配置复杂依赖和xml文件。依赖简化：将某个功能模块所需的所有依赖打包成一个“一站式”依赖，开发…...

编程日记 2025/8/25 23:32:38

python setup.py学习

Python-setup进阶打包命令 Python-setup进阶打包命令_python setup-CSDN博客 packages 需要处理的包目录（包含__init__.py的文件夹），这里通常使用 find_packages()，它默认在和setup.py同一目录下搜索各个含有 __init__.py的包。…...

编程日记 2025/8/24 8:26:39

最简单的使用SDL2 播放原始音频数据程序

author: hjjdebug date: 2025年 04月 15日星期二 14:02:05 CST description: 最简单的使用SDL2 播放原始音频数据程序文章目录 1.最简单的播放音频的程序是什么样子的?2. 怎样用SDL 来编写音频播放器代码?2.1 SDL播放音频核心代码:混音函数2.2 先看看音频播放的可能的两种框…...

编程日记 2025/8/24 15:06:39

利用IDEA开发Spark-SQL

创建子模块Spark-SQL，并添加依赖创建Spark-SQL的测试代码： 运行结果： 自定义函数： UDF： UDAF（自定义聚合函数） 强类型的 Dataset 和弱类型的 DataFrame 都提供了相关的聚合函数， …...

编程日记 2025/8/23 2:05:04

随身Wi-Fi能跑PCDN？

随身WiFi可以用于运行PCDN（点对点内容分发网络），但存在技术限制和潜在风险，需谨慎操作。可行性分析技术基础随身WiFi本质是便携式无线路由器，具备网络接入和分发能力，理论上可配置为PCDN节点。部分用户…...

编程日记 2025/8/22 7:44:24

Google-A2A协议全面解析：一文掌握Agent-to-Agent协议的核心与应用

前言： 在当今人工智能技术飞速发展的时代，智能体（Agent）已悄然融入我们生活的各个角落。无论是个人智能助手，还是企业的自动化工具，各类AI代理的应用愈发广泛。但目前这些智能体之间大多处于孤立状态&…...

编程日记 2025/8/20 8:39:05

jmeter压测工具出现乱码

然后 prev.setDataEncoding(“utf-8”)...

编程日记 2025/8/17 21:22:46

大模型训练显存压缩实战：ZeRO-3 vs 梯度累积 vs 量化混合策略

一、显存瓶颈的本质与挑战大模型训练面临的核心矛盾是模型参数量指数级增长与GPU显存容量线性提升之间的鸿沟。以175B参数模型为例，其显存消耗主要来自三个方面： 参数存储‌：FP32精度下需700GB显存‌梯度缓存‌：反向传播产生的…...

编程日记 2025/8/24 7:55:20

WPS JS宏编程教程（从基础到进阶）-- 第七部分：JS对象在WPS中的应用

目录第7章 JS对象在WPS中的应用7-1 对象创建的几种方法从零理解对象：数据收纳盒两种基础创建方式代码解析表 7-2 对象属性的查、改、增、删像操作Excel单元格一样管理属性1. 点操作符（静态键名）2. 中括号操作符（动态键名&#xf…...

编程日记 2025/8/19 2:48:35

网络编程（UDP）

server:服务器 # import socket # # 传递udp协议参数 # sk socket.socket(typesocket.SOCK_DGRAM) # # # 绑定ip及端口 # sk.bind(("127.0.0.1",8080)) # # print("等待客户端发送消息") # # # 直接发送 # msg,addr sk.recvfrom(1024) # # print(msg.d…...

编程日记 2025/8/22 7:34:18

深入讲解 CSS 选择器权重及实战

1. 权重计算规则详解 CSS 选择器的优先级由三元组 (x, y, z) 决定，比较规则如下： 选择器类型权重值 (x, y, z)示例ID 选择器x 1#header → (1,0,0)类/伪类/属性y 1.active, :hover元素/伪元素z 1div, ::before 比较规则：从左到右逐级比…...

编程日记 2025/8/23 2:05:21

Mysql的查询

1.Mysql的基本查询语法：select*from 表名;代表查询所有数据的所有列 SELECT * FROM classinfo; SELECT * FROM studentinfo; select 字段1，字段2.....from 表名;查询数据的指定字段查询studentinfo表的学生姓名和年龄 SELECT stuname,age FROM stu…...

编程日记 2025/8/22 8:25:49

RaabitMQ 快速入门

🎉欢迎大家观看AUGENSTERN_dc的文章(o゜▽゜)o☆✨✨ 🎉感谢各位读者在百忙之中抽出时间来垂阅我的文章，我会尽我所能向的大家分享我的知识和经验📖 🎉希望我们在一篇篇的文章中能够共同进步！！&…...

编程日记 2025/8/23 8:38:58

LLM: 探索LLM视觉缺陷

文章目录前言一、Constructing MMVP Benchmarks1、CLIP-blind pair 二、MMVP-VLM bench1、Model size influence2、correlation between CLIP MLLMs 三、Mixture of Features1、Additive MoF Experiment2、Interleaved MoF Experiment 总结前言在使用多模态大模型时候是否会…...

编程日记 2025/8/23 13:58:47

常用的 SQL 语句分类整理

以下是常用的 SQL 语句分类整理，覆盖数据查询、操作、表管理和高级功能，适用于大多数关系型数据库（如 MySQL、PostgreSQL、SQL Server）： 目录一、数据查询（DQL） 1. 基础查…...

编程日记 2025/8/19 7:17:39

Go之defer关键字：优雅的资源管理与执行控制

在Go语言中，defer关键字是处理资源释放、错误恢复和代码逻辑清理的利器。它看似简单，却隐藏着许多设计哲学和底层机制。本文将深入剖析defer的执行原理、使用场景和常见陷阱，助你掌握这一关键特性。一、defer基础：延迟执行的本质…...

编程日记 2025/8/21 2:35:28

T1结构像+RS-fMRI影像处理完整过程记录（数据下载+Matlab工具箱+数据处理）

最近需要仿真研究T1结构像RS-fMRI影像融合处理输出目标坐标的可行性。就此机会记录下来。为了完成处理，首先需要有数据，然后需要准备对应的处理平台和工具箱。那么正文开始~ （1）下载满足要求的开源数据去OpenNEURO https://open…...

编程日记 2025/8/21 18:38:25

Flowable进阶-网关、事件和服务

网关并行网关并行网关允许将流程拆分为多个分支，也可以将多个分支汇集到一起。并行网关的功能是基于流入流出的顺序流。fork分支：用于任务的开始。并行后所有外出的顺序流，为每个顺序流都创建一个并发分支。 join汇聚：用于任务…...

编程日记 2025/8/25 9:57:22

【三维重建与生成】GenFusion：SVD统一重建和生成

标题:《GenFusion: Closing the Loop between Reconstruction and Generation via Videos》来源：西湖大学；慕尼黑工业大学；上海科技大学；香港大学；图宾根大学项目主页：https://genfusion.sibowu.com 文章…...

编程日记 2025/8/20 18:56:37

常见的爬虫算法

1.base64加密 base64是什么 Base64编码，是由64个字符组成编码集：26个大写字母AZ，26个小写字母az，10个数字0~9，符号“”与符号“/”。Base64编码的基本思路是将原始数据的三个字节拆分转化为四个字节，然后…...

编程日记 2025/8/24 14:55:12

有序二叉树各种操作实现（数据结构C语言多文件编写）

1.先创建tree.h声明文件( Linux 命令：touch tree.h)。编写函数声明如下(打开文件 Linux 操作命令：vim tree.h): //树的头文件位置 #ifndef __TREE_H__ #define __TREE_H__ //节点 typedef struct node{int data;//数据struct node* left;//记录左侧子节…...

编程日记 2025/8/25 1:01:56

Nacos-Controller 2.0：使用 Nacos 高效管理你的 K8s 配置

作者：濯光、翼严 Kubernetes 配置管理的局限目前，在 Kubernetes 集群中，配置管理主要通过 ConfigMap 和 Secret 来实现。这两种资源允许用户将配置信息通过环境变量或者文件等方式，注入到 Pod 中。尽管 Kubernetes 提供了这些强…...

编程日记 2025/8/25 17:09:04

特殊文件以及日志——特殊文件

一、特殊文件必要性：可以用于存储多个用户的：用户名、密码。这些有关系的数据都可以用特殊文件来存储，然后作为信息进行传输。 1. 属性文件.properties（键值对） （1）特点： 都只能…...

编程日记 2025/8/24 19:47:10

Spark-SQL核心编程语言

利用IDEA开发spark-SQL 创建spark-SQL测试代码自定义函数UDF 自定义聚合函数UDAF 强类型的 Dataset 和弱类型的 DataFrame 都提供了相关的聚合函数， 如 count()， countDistinct()，avg()，max()，min()。除此之外&…...

编程日记 2025/8/25 1:16:24

jdk 安装

oracle官网 : Java Archive | Oracle 中国 export JAVA_HOME/Users/xxxxx/app/services/x86jdk/jdk1.8.0_431.jdk/Contents/Home export PATH$JAVA_HOME/bin:$PATH 华为镜像网站：Index of java-local/jdk...

编程日记 2025/8/18 19:34:08

一、盒模型

二、盒模型模式

总之：可以使用 box-sizing CSS 属性来控制盒模型的选择，从而影响元素的布局计算。

三、border、margin 和 padding 的区别

四、边框border

五、内边距padding

1. 内容与边框留白

六、外边距margin

1. ‌百分比值基准

4. ‌外边距合并（Margin Collapse）‌

七、综合应用

相关文章：

总之：可以使用 `box-sizing` CSS 属性来控制盒模型的选择，从而影响元素的布局计算。

三、`border`、`margin` 和 `padding` 的区别