【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
文章目录
- 一、外边距塌陷描述
- 1、没有塌陷的情况
- 2、外边距塌陷情况
- 二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框
- 三、使用浮动解决外边距塌陷 - 为子元素设置浮动
- 四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位
一、外边距塌陷描述
在 标准流的父盒子 中 , 添加一个 标准流子盒子 ;
如果 子盒子设置 100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ;
下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ;
示例 2 中 , 为子盒子设置了 上外边距 , 结果将 父盒子也带下来了 ;
1、没有塌陷的情况
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距塌陷示例</title><style>.father {width: 400px;height: 400px;background-color: pink;}.son {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
展示效果 :
2、外边距塌陷情况
在子盒子中设置了 100 像素的上外边距 , 出现了外边距塌陷的情况 ;
/* 子盒子添加上外边距 出现塌陷情况 */
margin-top: 100px;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距塌陷示例</title><style>.father {width: 400px;height: 400px;background-color: pink;}.son {width: 200px;height: 200px;background-color: red;/* 子盒子添加上外边距 出现塌陷情况 */margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
展示效果 :
二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框
这里使用传统方法 : 为 父容器 / 子元素 设置 内边距 / 边框 ;
下面是 为父容器设置 1 像素的 内边距 ;
.father {width: 400px;height: 400px;background-color: pink;/* 为父容器 / 子元素设置内边距 / 边框 */padding: 1px;}
完整代码如下 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距塌陷示例</title><style>.father {width: 400px;height: 400px;background-color: pink;/* 为父容器 / 子元素设置内边距 / 边框 */padding: 1px;}.son {width: 200px;height: 200px;background-color: red;/* 子盒子添加上外边距 出现塌陷情况 */margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
展示效果 :
三、使用浮动解决外边距塌陷 - 为子元素设置浮动
为子元素设置浮动 , 可以解决 外边距 塌陷问题 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距塌陷示例</title><style>.father {width: 400px;height: 400px;background-color: pink;/* 为父容器 / 子元素设置内边距 / 边框 *//*padding: 1px;*/}.son {/* 为子元素设置浮动 解决外边距塌陷问题 */float: left;width: 200px;height: 200px;background-color: red;/* 子盒子添加上外边距 出现塌陷情况 */margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
执行结果 :
四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位
为子元素设置绝对定位 , 可以解决 外边距 塌陷问题 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距塌陷示例</title><style>.father {width: 400px;height: 400px;background-color: pink;/* 为父容器 / 子元素设置内边距 / 边框 *//*padding: 1px;*/}.son {/* 为子元素设置绝对定位 解决外边距塌陷问题 *//* 注意 : 为子元素设置相对定位 仍然会出现外边距塌陷问题 */position: absolute;/* 为子元素设置浮动 解决外边距塌陷问题 *//*float: left;*/width: 200px;height: 200px;background-color: red;/* 子盒子添加上外边距 出现塌陷情况 */margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
展示效果 :
相关文章：
【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
文章目录一、外边距塌陷描述1、没有塌陷的情况2、外边距塌陷情况二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框三、使用浮动解决外边距塌陷 - 为子元素设置浮动四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位一、外边距塌陷描述 在 标准流的父盒子…...
前端手写综合考题
1 实现一个 // 使用 promise来实现 sleepconst sleep (time) > {return new Promise(resolve > setTimeout(resolve, time))}sleep(1000).then(() > {// 这里写你的骚操作}) sleep 函数，比如 sleep(1000) 意味着等待1000毫秒 2 给定两个数组，…...
数据结构-排序
本节目标： 1.排序的概念及其运用 2.常见排序算法的实现 3.排序算法复杂度及稳定性分析 1.排序的概念及其应用 1.1排序的概念 排序就是按照某个我们设定的关键字，或者关键词，递增或者递减，完成这样的操作就是排序。 1.2排…...
ROS话题通信自定义+发布订阅代码--03
话题通信自定义msg 在 ROS 通信协议中，数据载体是一个较为重要组成部分，ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是，这些数据一般只包含一个 data 字段，结构的单一意味…...
【MySQL】实验七 视图
文章目录 1. 建立city值为上海、北京的顾客视图2. 建立城市为上海的客户2016年的订单信息视图3. SQL视图：建立视图AVG_CJ4. SQL视图：建立视图IS_STUDENT5. SQL视图：建立视图CJ_STUDENT6. SQL视图：根据视图CJ_STUDENT创建视图CJ_TJ1. 建立city值为上海、北京的顾客视图 建立…...
Linux常见操作命令【三】
一、系统资源 1.1 ps（process staus） ps -ef e显示所有进程、f全格式 ps -aux 显示所有包含其他使用者的进程 ps -ef | grep CCC 查找含有CCC进程的格式 ps -u username 显示指定进程用户信息1.2 kill kill 12345 杀死进程12345 kill -KILL…...
C-关键字(下)
文章目录循环控制switch-case-break-defaultdo-while-forgetchar()break-continuegotovoidvoid*returnconstconst修饰变量const修饰数组const修饰指针指针补充const 修饰返回值volatilestruct柔型数组union联合体联合体空间开辟问题利用联合体的性质,判断机器是大端还是小端enu…...
关于电商商品数据API接口列表，你想知道的（详情页、Sku信息、商品描述、评论问答列表）
目录 一、商品数据API接口列表 二、商品详情数据API调用代码item_get 三、获取sku详细信息item_sku 四、获得淘宝商品评论item_review 五、数据说明文档 进入 一、商品数据API接口列表 二、商品详情数据API调用代码item_get <?php// 请求示例 url 默认请求参数已经URL…...
232：vue+openlayers选择左右两部分的地图，不重复，横向卷帘
第232个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中自定义js实现横向卷帘。这个示例中从左右两个选择框中来选择不同的地图，做了不重复的处理，即同一个数组，两部分根据选择后的状态做disabled处理，避免重复选择。 直接复制下面的 vue+openlayers…...
溯源取证-内存取证 高难度篇
今天的场景依然是windows场景，只不过此次场景分为两个镜像，本次学习主要学习如何晒别钓鱼邮件、如何提取钓鱼邮件、如何修复损坏的恶意文件、如何提取DLL动态链接库文件 本次需要使用的工具： volatility_2.6_lin64_standalone readpst clams…...
JAVA语言中的代理模式
代理可以进一步划分为静态代理和动态代理，代理模式在实际的生活中场景很多，例如中介、律师、代购等行业，都是简单的代理逻辑，在这个模式下存在两个关键角色： 目标对象角色：即代理对象所代表的对象。 代理…...
最后一步：渲染和绘制
浏览器的工作步骤如下： URL>字符流>词（token）流>DOM树（不含样式信息的 DOM）>DOM树CSS规则（含样式信息的 DOM）>根据样式信息，计算了每个元素的位置和大小>根据这些…...
C++类和对象终章——友元函数 | 友元类 | 内部类 | 匿名对象 | 关于拷贝对象时一些编译器优化
文章目录💐专栏导读💐文章导读🌷友元🌺概念🌺友元函数🍁友元函数的重要性质🌺友元类🍁友元类的重要性质🌷内部类（不常用）🌺内部类的性…...
拼多多按关键字搜索商品 API
一、拼多多平台优势： 1、独创拼团模式 拼团拼单是拼多多独创的营销模式，其特点是基于人脉社交的裂变传播，非常具有传播性。 由于本身走低价路线，加上拼单折扣，商品的分享和人群裂变效果非常明显，电商前期…...
全链路日志追踪
背景 最近线上的日志全局追踪 traceId 不好使了，不同请求经常出现重复的 traceId，或者通过某个请求的 traceId 追踪搜索，检索出了与该请求完全不相干的日志。我领导叫我去排查解决这个问题，这里我把我排查的过程思路以及如何解决…...
ZYNQ：【1】深入理解PS端的TTC定时器（Part1：原理+官方案例讲解）
碎碎念：好久不见，甚是想念！本期带来的是有关ZYNQ7020的内容，我们知道ZYNQ作为一款具有硬核的SOC，PS端很强大，可以更加便捷地实现一些算法验证。本文具体讲解一下里面的TTC定时器，之后发布的Part…...
蓝牙设备如何自定义UUID
如何自定义UUID 所有 BLE 自定义服务和特性必须使用 128 位 UUID 来识别，并且要确保基本 UUID 与 BLE 定义的基本 UUID（00000000-0000-1000-8000-00805F9B34FB）不一样。基本 UUID 是一个 128 位的数值，根据该值可定义标准UUID&am…...
好看的html登录界面，
界面效果： 代码： <!DOCTYPE html> <html><head><title>Login Page</title><style>body {background-color: #f2f2f2;font-family: Arial, sans-serif;}form {background-color: #fff;border-radius: 5px;box-shado…...
Java模拟星空
目录 前言 JavaFX基础 1. GraphicsContext 2. AnimationTimer 代码实现 完整代码 前言 看了Python模拟星空很漂亮，Java也应该必须有一个！ 环境：只需要JDK1.8就好！不需要外部包！！！ Jav…...
YGG 代表 Web3 Gaming 参加 2023 年游戏开发者大会
Yield Guild Games（YGG）在 2023 年 3 月 20 日至 24 日在加州旧金山举行的游戏开发者大会（GDC）上大显身手，这是游戏开发者的重要交流学习活动。虽然 GDC 本身提供了多种多样的活动，包括讲座、小组讨论、圆桌…...
别再死记硬背了！用‘神经元工作原理’理解你背单词为什么总忘
别再死记硬背了！用‘神经元工作原理’理解你背单词为什么总忘 背单词时总是前脚记后脚忘？这其实不是记忆力的问题，而是方法的问题。我们的大脑就像一台精密的生物计算机，而记忆的形成和巩固遵循着特定的神经科学规律。理解这些规…...
如何全面移除开源工具残留？四步环境净化实施方案
如何全面移除开源工具残留？四步环境净化实施方案 【免费下载链接】ralph-claude-code Autonomous AI development loop for Claude Code with intelligent exit detection 项目地址: https://gitcode.com/GitHub_Trending/ra/ralph-claude-code 一、问题诊断…...
如何高效使用AI音频分离神器：Ultimate Vocal Remover GUI完全指南
如何高效使用AI音频分离神器：Ultimate Vocal Remover GUI完全指南 【免费下载链接】ultimatevocalremovergui 使用深度神经网络的声音消除器的图形用户界面。 项目地址: https://gitcode.com/GitHub_Trending/ul/ultimatevocalremovergui Ultimate Vocal Rem…...
OpenClaw性能对比：GLM-4.7-Flash与其他模型实测数据
OpenClaw性能对比：GLM-4.7-Flash与其他模型实测数据 1. 测试背景与实验设计 最近在优化个人自动化工作流时，我注意到OpenClaw对不同大模型的表现差异显著。特别是当任务链较长时，模型响应速度和稳定性直接影响最终效果。本次测试聚焦于GLM-…...
Excel中利用VBA批量检测URL链接状态
1. 为什么需要批量检测URL链接状态 在日常工作中，我们经常会遇到需要处理大量URL链接的情况。比如做数据分析时收集的网站列表、电商平台的商品链接、或者是内容管理系统中的文章地址。这些链接中难免会有失效的情况，可能是网站改版、页面删除࿰…...
刚学单片机的小白，聊聊我的学习目标和职业期待
大家好，我是一名智能科学与技术专业的大二学生，目前刚刚开始接触单片机，还是个实打实的小白。开这篇博客，主要是想记录自己的学习历程，也希望能和同样入门的同学一起交流、互相鼓励。一、自我介绍我目前大二࿰…...
Ostrakon-VL-8B效果展示：AI识别货架商品、检查消防通道真实案例
Ostrakon-VL-8B效果展示：AI识别货架商品、检查消防通道真实案例 1. 零售行业的视觉智能革命 走进任何一家超市或餐厅，你都会看到员工忙碌地进行各种检查：商品是否摆放整齐、货架是否需要补货、消防通道是否畅通。这些看似简单的工作&#x…...
用tcpreplay+Wireshark搭建网络攻防实验环境：手把手教你复现渗透测试流量
实战指南：用tcpreplay与Wireshark构建网络攻防实验环境 在网络安全领域，理论知识的掌握固然重要，但真正的技能提升往往来自于实战演练。然而，直接在真实网络环境中进行渗透测试或攻击模拟不仅存在法律风险，还可能对生…...
ssm+java2026年毕设随心淘网管理系统【源码+论文】
本系统（程序源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、选题背景关于电商会员管理系统的研究，现有研究主要以大型综合电商平台（如淘宝、京东）的整体架构设计…...
WarcraftHelper：魔兽争霸3兼容性问题的全方位解决方案
WarcraftHelper：魔兽争霸3兼容性问题的全方位解决方案 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 问题发现：现代系统下的经…...