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

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

news 2025/11/10 21:45:25

垂直外边距的重叠

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

            兄弟元素

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

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

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

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

           

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

 

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

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/11/7 14:07:46

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/10/16 23:00:32

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/11/8 5:08:11

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/11/8 1:29:21

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/9/14 20:44:53