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

【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

news 2025/11/5 19:32:34

文章目录

  • 一、外边距塌陷描述
    • 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、外边距塌陷情况二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框三、使用浮动解决外边距塌陷 - 为子元素设置浮动四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位一、外边距塌陷描述 在 标准流的父盒子…...

编程日记 2023/5/29 21:38:05

前端手写综合考题

1 实现一个 // 使用 promise来实现 sleepconst sleep (time) > {return new Promise(resolve > setTimeout(resolve, time))}sleep(1000).then(() > {// 这里写你的骚操作}) sleep 函数&#xff0c;比如 sleep(1000) 意味着等待1000毫秒 2 给定两个数组&#xff0c…...

编程日记 2023/4/17 10:47:09

数据结构-排序

本节目标&#xff1a; 1.排序的概念及其运用 2.常见排序算法的实现 3.排序算法复杂度及稳定性分析 1.排序的概念及其应用 1.1排序的概念 排序就是按照某个我们设定的关键字&#xff0c;或者关键词&#xff0c;递增或者递减&#xff0c;完成这样的操作就是排序。 1.2排…...

编程日记 2023/4/17 10:42:07

ROS话题通信自定义+发布订阅代码--03

话题通信自定义msg 在 ROS 通信协议中&#xff0c;数据载体是一个较为重要组成部分&#xff0c;ROS 中通过 std_msgs 封装了一些原生的数据类型,比如:String、Int32、Int64、Char、Bool、Empty… 但是&#xff0c;这些数据一般只包含一个 data 字段&#xff0c;结构的单一意味…...

编程日记 2023/4/17 10:37:05

【MySQL】实验七 视图

文章目录 1. 建立city值为上海、北京的顾客视图2. 建立城市为上海的客户2016年的订单信息视图3. SQL视图：建立视图AVG_CJ4. SQL视图：建立视图IS_STUDENT5. SQL视图：建立视图CJ_STUDENT6. SQL视图：根据视图CJ_STUDENT创建视图CJ_TJ1. 建立city值为上海、北京的顾客视图 建立…...

编程日记 2023/6/1 5:33:08

Linux常见操作命令【三】

一、系统资源 1.1 ps&#xff08;process staus&#xff09; ps -ef e显示所有进程、f全格式 ps -aux 显示所有包含其他使用者的进程 ps -ef | grep CCC 查找含有CCC进程的格式 ps -u username 显示指定进程用户信息1.2 kill kill 12345 杀死进程12345 kill -KILL…...

编程日记 2023/4/17 10:27:03

C-关键字(下)

文章目录循环控制switch-case-break-defaultdo-while-forgetchar()break-continuegotovoidvoid*returnconstconst修饰变量const修饰数组const修饰指针指针补充const 修饰返回值volatilestruct柔型数组union联合体联合体空间开辟问题利用联合体的性质,判断机器是大端还是小端enu…...

编程日记 2023/4/17 10:22:02

关于电商商品数据API接口列表，你想知道的（详情页、Sku信息、商品描述、评论问答列表）

目录 一、商品数据API接口列表 二、商品详情数据API调用代码item_get 三、获取sku详细信息item_sku 四、获得淘宝商品评论item_review 五、数据说明文档 进入 一、商品数据API接口列表 二、商品详情数据API调用代码item_get <?php// 请求示例 url 默认请求参数已经URL…...

编程日记 2023/4/17 10:17:00

232：vue+openlayers选择左右两部分的地图，不重复，横向卷帘

第232个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中自定义js实现横向卷帘。这个示例中从左右两个选择框中来选择不同的地图，做了不重复的处理，即同一个数组，两部分根据选择后的状态做disabled处理，避免重复选择。 直接复制下面的 vue+openlayers…...

编程日记 2023/4/17 10:11:58

溯源取证-内存取证 高难度篇

今天的场景依然是windows场景&#xff0c;只不过此次场景分为两个镜像&#xff0c;本次学习主要学习如何晒别钓鱼邮件、如何提取钓鱼邮件、如何修复损坏的恶意文件、如何提取DLL动态链接库文件 本次需要使用的工具&#xff1a; volatility_2.6_lin64_standalone readpst clams…...

编程日记 2023/5/29 21:39:18

JAVA语言中的代理模式

代理可以进一步划分为静态代理和动态代理&#xff0c;代理模式在实际的生活中场景很多&#xff0c;例如中介、律师、代购等行业&#xff0c;都是简单的代理逻辑&#xff0c;在这个模式下存在两个关键角色&#xff1a; 目标对象角色&#xff1a;即代理对象所代表的对象。 代理…...

编程日记 2023/5/31 3:13:30

最后一步：渲染和绘制

浏览器的工作步骤如下&#xff1a; URL>字符流>词&#xff08;token&#xff09;流>DOM树&#xff08;不含样式信息的 DOM&#xff09;>DOM树CSS规则&#xff08;含样式信息的 DOM&#xff09;>根据样式信息&#xff0c;计算了每个元素的位置和大小>根据这些…...

编程日记 2023/5/31 3:16:38

C++类和对象终章——友元函数 | 友元类 | 内部类 | 匿名对象 | 关于拷贝对象时一些编译器优化

文章目录&#x1f490;专栏导读&#x1f490;文章导读&#x1f337;友元&#x1f33a;概念&#x1f33a;友元函数&#x1f341;友元函数的重要性质&#x1f33a;友元类&#x1f341;友元类的重要性质&#x1f337;内部类&#xff08;不常用&#xff09;&#x1f33a;内部类的性…...

编程日记 2023/4/17 9:51:54

拼多多按关键字搜索商品 API

一、拼多多平台优势&#xff1a; 1、独创拼团模式 拼团拼单是拼多多独创的营销模式&#xff0c;其特点是基于人脉社交的裂变传播&#xff0c;非常具有传播性。 由于本身走低价路线&#xff0c;加上拼单折扣&#xff0c;商品的分享和人群裂变效果非常明显&#xff0c;电商前期…...

编程日记 2023/5/31 3:17:15

全链路日志追踪

背景 最近线上的日志全局追踪 traceId 不好使了&#xff0c;不同请求经常出现重复的 traceId&#xff0c;或者通过某个请求的 traceId 追踪搜索&#xff0c;检索出了与该请求完全不相干的日志。我领导叫我去排查解决这个问题&#xff0c;这里我把我排查的过程思路以及如何解决…...

编程日记 2023/4/17 9:41:52

ZYNQ：【1】深入理解PS端的TTC定时器（Part1：原理+官方案例讲解）

碎碎念&#xff1a;好久不见&#xff0c;甚是想念&#xff01;本期带来的是有关ZYNQ7020的内容&#xff0c;我们知道ZYNQ作为一款具有硬核的SOC&#xff0c;PS端很强大&#xff0c;可以更加便捷地实现一些算法验证。本文具体讲解一下里面的TTC定时器&#xff0c;之后发布的Part…...

编程日记 2023/6/1 5:34:57

蓝牙设备如何自定义UUID

如何自定义UUID 所有 BLE 自定义服务和特性必须使用 128 位 UUID 来识别&#xff0c;并且要确保基本 UUID 与 BLE 定义的基本 UUID&#xff08;00000000-0000-1000-8000-00805F9B34FB&#xff09;不一样。基本 UUID 是一个 128 位的数值&#xff0c;根据该值可定义标准UUID&am…...

编程日记 2023/4/17 9:31:49

好看的html登录界面，

界面效果&#xff1a; 代码&#xff1a; <!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…...

编程日记 2023/5/31 3:18:59

Java模拟星空

目录 前言 JavaFX基础 1. GraphicsContext 2. AnimationTimer 代码实现 完整代码 前言 看了Python模拟星空很漂亮&#xff0c;Java也应该必须有一个&#xff01; 环境&#xff1a;只需要JDK1.8就好&#xff01;不需要外部包&#xff01;&#xff01;&#xff01; Jav…...

编程日记 2023/4/17 9:21:46

YGG 代表 Web3 Gaming 参加 2023 年游戏开发者大会

Yield Guild Games&#xff08;YGG&#xff09;在 2023 年 3 月 20 日至 24 日在加州旧金山举行的游戏开发者大会&#xff08;GDC&#xff09;上大显身手&#xff0c;这是游戏开发者的重要交流学习活动。虽然 GDC 本身提供了多种多样的活动&#xff0c;包括讲座、小组讨论、圆桌…...

编程日记 2023/4/17 9:16:45

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/8/5 22:19:11

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/10/31 14:20:25

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/10/30 23:46:06

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/11/2 11:07:47