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

前端学习DAY33（外边距的折叠）

news 2025/6/9 10:12:03

垂直外边距的重叠

在网页中相邻的垂直方向的外边距，会发生外边距的重叠

兄弟元素

兄弟元素之间的相邻外边距会取（绝对值）最大值，而不是取和，谁大取谁

特殊情况：如果相邻的外边距一正一负，则取两者的和

如果相邻的外边距都是负值，则取绝对值较大的

兄弟元素的外边距重叠，并对开发有利，不用处理

需求：将子元素移动到父元素的左下角

为上边的元素设置一个外边距box1

margin-bottom: 10px;

为下边的元素设置一个外边距box2

margin-top: 10px;

距离相隔10px

若距离设置为上边元素外边距为-20PX下边元素外边距是10PX则取10PX

如距离设置为上边元素外边距为-20PX下边元素外边距为-20PX则取20PX

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D</title><style type="text/css">.box1{width: 100px;height: 100px;background-color: blueviolet;margin-bottom: -20px;}.box2{width: 100px;height: 100px;background-color: chartreuse;margin-top: -20px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

前端学习DAY33（外边距的折叠）

垂直外边距的重叠在网页中相邻的垂直方向的外边距，会发生外边距的重叠兄弟元素兄弟元素之间的相邻外边距会取（绝对值）最大值，而不是取和，谁大取谁特殊情况：如果相邻的外边距一正一负，则取两…...

编程日记 2025/1/10 1:51:41

asp.net core mvc的 ViewBag ， ViewData ， Module ，TempData

在 ASP.NET MVC 和 ASP.NET Core MVC 中，ViewBag 和 ViewData 是两种用于将数据从控制器传递到视图（View）的常用方法。它们都允许控制器将动态数据传递给视图，但它们的实现方式有所不同。关于 Module，它通常指的是某种…...

编程日记 2025/1/10 1:49:39

Linux驱动学习之第二个驱动程序(LED点亮关闭驱动程序-分层设计思想,使其能适应不同的板子-驱动程序模块为多个源文件怎么写Makefile)

目录看这篇博文前请先掌握下面这些博文中的知识需要的PDF资料完整源代码board_fire_imx6ull-pro.c中的代码leddrv.c中的代码ledtest.c中的代码程序设计思想和文件结构实现分层思想的具体方法概述具体实现分析定义结构体led_operations用来集合各个单板硬件层面操作LED的函数定…...

编程日记 2025/1/10 1:45:33

手写@EnableTransactionalManagement

定义一个注解，用于标注于方法上，标志着此方法是一个事务方法。 Target({ElementType.METHOD,ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) public interface MyTransaction {}定义一个开启事务功能的注解 Component Import(TransActionBean…...

编程日记 2025/1/10 1:44:32

【Vue】：解决动态更新＜video＞标签 src 属性后视频未刷新的问题

问题描述在 Vue.js 项目，当尝试动态更新 <video> 标签的 <source> 元素 src 属性来切换视频时，遇到了一个问题：即使 src 属性已更改，浏览器仍显示旧视频。具体表现为用户选择新视频后，视频区域继续显示之…...

编程日记 2025/1/10 1:35:21

网络基础1 http1.0 1.1 http/2的演进史

http1.0 1.1 http/2的演进史😎 （连接复用队头阻塞服务器推送 2进制分帧） 概述我们主要关注的是应用层传输层 http协议发展历史 http的报文结构：起始行 Header Body http的典型特征 http存在的典型问题 Keep Alive机制 chun…...

编程日记 2025/1/10 1:29:16

Python 通过命令行在 unittest.TestCase 中运行单元测试

文章目录 unittest 模块简介编写单元测试在命令行中运行所有测试在命令行中运行单个测试使用装饰器跳过测试总结常用断言方法 unittest 模块简介 unittest是Python标准库中的一个模块，用于编写和运行单元测试。它提供了一个单元测试框架，使得编写测试用…...

编程日记 2025/1/10 1:28:15

源代码编译安装X11及相关库、vim，配置vim（2）

一、编译安装vim 编译时的cofigure选项如下.只有上一步的X11的包安装全了（具体哪些是必须的，哪些是多余的没验证），configure才能认为X的库文件和头文件是可以用的。打开多个编程语言的支持特性。 ./configure --prefixpwd/mybui…...

编程日记 2025/1/10 1:27:10

设计模式行为型观察者模式（Observer Pattern）与常见技术框架应用解析

观察者模式（Observer Pattern）是一种行为设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新。一…...

编程日记 2025/1/10 1:21:01

【25考研】川大计算机复试情况，重点是啥？怎么准备？

24年进入复试的同学中，有10位同学的复试成绩为0分。具体是个人原因还是校方原因，还尚不明确。但是C哥提醒，一定要认真复习！复试完后不要跟任何人讨论有关复试的题目及细节！ 一、复试内容四川大学复试内容较多&#xf…...

编程日记 2025/1/10 1:20:00

C#调用Lua

目录 xLua导入打包工具导入单例基类导入与AB包管理器导入 Lua解析器文件加载与重定向 Lua解析器管理器全局变量获取全局函数获取对于无参数无返回值对于有参数有返回值对于多返回值对于变长参数完整代码 List与Dictionary映射Table 类映射Table 接口映射…...

编程日记 2025/1/10 1:15:56

LeetCode100之组合总和(39)--Java

1.问题描述给你一个无重复元素的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的所有不同组合 ，并以列表形式返回。你可以按任意顺序返回这些组合。 candidates 中的同一个数字可以无限制重复…...

编程日记 2025/1/10 1:11:52

NTN学习笔记之术语和缩写词解析

去发现，去努力，去表达。参考：3GPP TR 38.811（R15），TR 38.821（R16） 目录 0. NTN典型架构图1. 术语2. 缩写 0. NTN典型架构图为了方便对术语场景的理解，先放上两张NTN典…...

编程日记 2025/1/10 1:10:52

Yolo11改进：注意力改进|Block改进|ESSAformer，用于高光谱图像超分辨率的高效Transformer|即插即用

摘要一、论文介绍高光谱图像超分辨率的重要性：高光谱成像技术通过密集采样光谱特征，为材料区分提供丰富的光谱和空间结构信息，广泛应用于各领域。高光谱图像超分辨率（HSI-SR）旨在从低分辨率HSI生成高分辨率HSI。传统方法的局限性：传统方法依赖手工制作的先验，如低秩近…...

编程日记 2025/1/10 1:09:51

STM32 单片机练习项目 LED灯闪烁LED流水灯蜂鸣器未完待续

个人学习笔记文件路径：程序源码\STM32Project-DAP&DAPmini\1-1 接线图 3-1LED闪烁图片新建项目新建项目文件选择F103C8芯片关闭弹出窗口拷贝资料在项目内新建3个文件夹 Start、Library、User Start文件拷贝从资料中拷贝文件文件路径：固…...

编程日记 2025/1/10 1:08:50

使用PyTorch实现基于稀疏编码的生成对抗网络（GAN）在CIFAR-10数据集上的应用

使用PyTorch实现基于稀疏编码的生成对抗网络（GAN）在CIFAR-10数据集上的应用目录使用PyTorch实现基于稀疏编码的生成对抗网络（GAN）在CIFAR-10数据集上的应用1. 引言2. 数据集介绍3. 模型网络结构3.1 网络结构3.2 编码器3.3 生成器3.4 判别器4. 模型优化器与损失函数4.1 优…...

编程日记 2025/1/10 1:07:48

用matlab调用realterm一次性发送16进制数

realterm采用PutString接口进行发送，需要注意的是发送的16进制数前面要加入0x标志。只有这样，realterm才能将输入的字符串识别为16进制数的形式。另外,PutString函数支持两个参数输入，第一个参数为字符串，第二个参数为发送形式&…...

编程日记 2025/1/10 1:06:47

通过可穿戴外骨骼，以更灵活的方式操作你的机器人。

今天，我们将介绍一款专为控制 Mercury X1 和 Mercury B1 机械臂而设计的创新外骨骼。这种外骨骼以人类手臂的结构为蓝本，可实现直观和精确的控制。开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…...

编程日记 2025/1/10 1:04:44

记录将springboot的jar包和lib分离，使用docker-compose部署

本文讲诉如何把jar里的lib依赖包独立出来，方便更新服务时，缩小jar的体积，下面以若依的system服务为例，配置中的路径请酌情修改，主要提供大致配置逻辑第一步：修改项目的pom.xml，调整build的配…...

编程日记 2025/1/10 1:03:42

JavaScript 延迟加载的方法

延迟加载（Lazy Loading）是一种优化网页性能的技术，它允许资源（如图片、脚本等）在需要时才被加载，而不是在页面初次加载时全部加载。这可以减少初始页面加载时间，提升用户体验，特别是…...

编程日记 2025/1/10 1:02:39

9.RV1126-OPENCV 视频的膨胀和腐蚀

一.膨胀 1.视频流的膨胀流程之前膨胀都是在图片中进行的，现在要在视频中进行也简单，大概思路就是：获取VI数据，然后把VI数据给Mat化发给VENC模块，然后VENC模块获取，这样就完成了。流程图： 2.代…...

编程新知 2025/6/9 5:19:43

qt使用笔记二：main.cpp详解

Qt中main.cpp文件详解 main.cpp是Qt应用程序的入口文件，包含程序的启动逻辑。下面我将详细解析其结构和功能。基本结构一个典型的Qt main.cpp 文件结构如下： #include <QApplication> // 或者 QGuiApplication/QCoreApplication #include &…...

编程新知 2025/6/9 4:31:29

Nuget包名称 System.IO.Ports 参考代码 using System; using System.IO.Ports; using System.Threading;namespace test {class Program{static void Main(){SerialPort port new SerialPort("COM1", 9600); // 配置串口port.Open();Timer timer new Timer((_) &…...

编程新知 2025/6/9 3:51:24

随访系统安装的记录

安装PG17.5 安装https://www.cnblogs.com/nulixuexipython/p/18040243 1、遇到navicat链接不了PG https://blog.csdn.net/sarsscofy/article/details/84985933 2、查看有无安装mysqlhttps://blog.51cto.com/u_16175430/7261412 3、方案一：oracle不开日志 data…...

编程新知 2025/6/9 1:53:42