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

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

news 2026/4/8 11:23:13

垂直外边距的重叠

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

            兄弟元素

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

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

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

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

           

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

 

为上边的元素设置一个外边距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（外边距的折叠）

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

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

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

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

编程日记 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

定义一个注解&#xff0c;用于标注于方法上&#xff0c;标志着此方法是一个事务方法。 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 项目&#xff0c;当尝试动态更新 <video> 标签的 <source> 元素 src 属性来切换视频时&#xff0c;遇到了一个问题&#xff1a;即使 src 属性已更改&#xff0c;浏览器仍显示旧视频。具体表现为用户选择新视频后&#xff0c;视频区域继续显示之…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24年进入复试的同学中&#xff0c;有10位同学的复试成绩为0分。具体是个人原因还是校方原因&#xff0c;还尚不明确。但是C哥提醒&#xff0c;一定要认真复习&#xff01;复试完后不要跟任何人讨论有关复试的题目及细节&#xff01; 一、复试内容 四川大学复试内容较多&#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 &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复…...

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

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

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

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

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

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

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

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

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

编程日记 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接口进行发送&#xff0c;需要注意的是发送的16进制数前面要加入0x标志。只有这样&#xff0c;realterm才能将输入的字符串识别为16进制数的形式。 另外,PutString函数支持两个参数输入&#xff0c;第一个参数为字符串&#xff0c;第二个参数为发送形式&…...

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

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

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

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

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

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

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

JavaScript 延迟加载的方法

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

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

Windows 下 Nexus 私有仓库配置与 SpringBoot 项目集成指南

1. Nexus私有仓库基础认知 第一次接触Nexus是在2015年参与某金融项目时&#xff0c;当时团队频繁遇到Maven中央仓库访问超时的问题。技术负责人建议搭建私有仓库&#xff0c;从此Nexus就成了我开发工具箱里的常备利器。简单来说&#xff0c;Nexus就像是你家里的零食储物柜——…...

编程新知 2026/4/8 10:38:08

2026最新最实用的40款AI工具，亲测免费！

这份最佳AI工具列表是如何评选的&#xff1f;本文列出了 40 款涵盖 20 个不同类别的 AI 工具。在探索了每个类别中的所有可用选项后&#xff0c;我们基于个人使用经验精心挑选出了这些最佳工具。以下推荐基于实际使用&#xff0c;你可以相信它们都切实有效。对于每款 AI 工具&a…...

编程新知 2026/4/8 10:19:31

Facebook4月为什么很容易封号，是风控变严了吗？

是的&#xff0c;4月份Facebook的风控确实会明显趋严。 这是平台为清理垃圾内容和违规行为而进行的大规模审核行动&#xff0c;主要源于Meta在4月底宣布的一项重大政策收紧。具体的风控升级背景和应对方案如下&#xff1a;&#x1f9d0; 为什么4月风控尤其严&#xff1f;Meta官…...

编程新知 2026/4/8 8:57:56

为什么说“季中调拨”能力，决定了服装企业的生死时速？

在服装行业&#xff0c;有一句老话&#xff1a;“做得好是时装&#xff0c;做不好是库存。”过去&#xff0c;这句话更多指向季末的积压。但今天&#xff0c;随着消费节奏加快、流行周期被压缩到以“周”为单位&#xff0c;真正的决胜点已经前移——季中调拨。季中调拨&#xf…...

编程新知 2026/4/8 8:51:40

别再盲目上协程！Python无锁并发成本决策树（含12个关键阈值参数与AWS/Azure实测TCO对比）

第一章&#xff1a;Python无锁并发的本质与GIL破局前提Python的“无锁并发”并非指完全绕过同步机制&#xff0c;而是指在特定场景下&#xff0c;通过原子操作、不可变数据结构或线程/进程隔离&#xff0c;避免显式使用 threading.Lock 等阻塞原语实现安全协作。其本质依赖于三…...

编程新知 2026/4/8 8:32:51

CSDN博客撰写指南：如何分享你的DeOldify部署与应用实战经验

CSDN博客撰写指南&#xff1a;如何分享你的DeOldify部署与应用实战经验 写技术博客&#xff0c;尤其是分享一个像DeOldify这样酷炫的AI上色项目&#xff0c;是件特别有成就感的事。它不仅帮你梳理了知识&#xff0c;还能帮到无数和你一样踩坑的开发者&#xff0c;更能为你的技…...

编程新知 2026/4/8 7:50:07

数字电子技术实验（高效学习指南）

1. 数字电子技术实验的痛点与突破方向 第一次接触数字电子技术实验的同学&#xff0c;常常会遇到这样的困境&#xff1a;面对实验箱上密密麻麻的芯片和导线不知所措&#xff0c;实验指导书上的原理图看了半天还是云里雾里&#xff0c;等到终于摸清门道时却发现下课铃已经响起。…...

编程新知 2026/4/8 7:44:06

【量子计算C++实战指南】：20年专家亲授，从零搭建Shor算法仿真器（含完整可运行代码）

第一章&#xff1a;量子计算与C编程的融合基础量子计算正从理论走向工程实践&#xff0c;而C凭借其零开销抽象、内存可控性与高性能特性&#xff0c;成为量子软件栈底层实现的关键语言。现代量子开发框架&#xff08;如QPP、Q、XACC&#xff09;普遍提供C原生API&#xff0c;使…...

编程新知 2026/4/8 5:57:51

项目建议书、可研报告与初步设计方案的定位与关联

在信息化项目建设过程中&#xff0c;项目建议书、可行性研究报告&#xff08;以下简称“可研报告”&#xff09;和初步设计方案是前期工作阶段最为核心的三份文件&#xff0c;它们共同构成了项目从构想到落地的决策链条&#xff0c;承担着不同阶段的论证与规划职责。然而实际工…...

编程新知 2026/4/8 5:41:40

Nunchaku FLUX.1 CustomV3实战：用简单描述生成赛博朋克、水墨风等多样作品

Nunchaku FLUX.1 CustomV3实战&#xff1a;用简单描述生成赛博朋克、水墨风等多样作品 你是否曾经想象过&#xff0c;只需输入一句话&#xff0c;就能让AI为你创作出风格各异的精美画作&#xff1f;今天我们要深入探索的Nunchaku FLUX.1 CustomV3镜像&#xff0c;正是这样一个…...

编程新知 2026/4/8 5:33:37