【CSS面试题】外边距折叠的原因和解决

news/2024/5/25 10:43:17/文章来源:https://blog.csdn.net/weixin_63681863/article/details/136591011

参考文章

什么时候出现外边距塌陷

外边距塌陷,也叫外边距折叠,在普通文档流中,在垂直方向上的2个或多个相邻的块级元素(父子或者兄弟)外边距合并成一个外边距的现象,不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。
两种情况:

  1. 父子元素:子元素添加margin-top,但子元素并没有和父元素产生间隔,margin-top作用在了父盒子上
<template><div class="father"><div class="son"></div></div>
</template><script setup>import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>.father {width: 500px;height: 300px;background-color: pink;.son {width: 100px;height: 100px;margin-top: 200px;background-color: skyblue;}}
</style>

在这里插入图片描述
或者父盒子和子盒子都添加margin-top,最后合并为一个margin-top取最大值,而不是2者之和

  .father {width: 500px;height: 300px;margin-top: 200px; //!!!background-color: pink;.son {width: 100px;height: 100px;margin-top: 100px; //!!background-color: skyblue;}}

在这里插入图片描述

  1. 兄弟元素:margin-bottom和margin-top合并,取最大值
<template><div class="box1"></div><div class="box2"></div>
</template><script setup>import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>.box1 {width: 100px;height: 100px;margin-bottom: 100px;background-color: skyblue;}.box2 {width: 100px;height: 100px;margin-top: 100px;background-color: orange;}
</style>

在这里插入图片描述

具体的外边距计算方式

1.两个都是正数,取较大的值
2.两个都是负数,取绝对值较大的值
3.一正一负,取两个值得和

为什么会出现外边距塌陷

怎么解决外边距塌陷

父子关系

让他们不在同一个BFC中

1. 父元素不用margin,用padding

2. 给父元素添加border

相当于加了一堵墙不让margin-top冲出去

3. 给父元素开启BFC

开启BFC共有7种方式,具体介绍,点击进入

4. 给父元素添加clearfix

注意这里是before,换成after不好用
&::before {
display: grid;
content: ‘’;
}

<style lang="scss" scoped>.father {width: 500px;height: 400px;// overflow: hidden;background-color: pink;&::before {display: grid;content: '';}.son1 {width: 100px;height: 100px;margin-top: 100px;background-color: skyblue;}}
</style>

兄弟关系

加上BFC外壳

1. 只给一个元素设置边距

2.

1.给下面的元素
position设置为absolute或者fixed
2.下面的元素设置左浮动
(1,2)会影响后面的元素
3.给下面的元素设置display:inline-block
4.其中一个元素外套一个div并设置overflow:hidden;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1007479.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[蓝桥杯]-最大的通过数-CPP-二分查找、前缀和

目录 一、题目描述&#xff1a; 二、整体思路&#xff1a; 三、代码&#xff1a; 一、题目描述&#xff1a; 二、整体思路&#xff1a; 首先要知道不是他们同时选择序号一样的关卡通关&#xff0c;而是两人同时进行两个入口闯关。就是说两条通道存在相同关卡编号的的关卡被通…

104. Go单测系列4---编写可测试的代码

文章目录 一、剔除干扰因素二、接口抽象进行解耦三、依赖注入代替隐式依赖四、SOLID原则 本文是Go单测系列的最后一篇&#xff0c;在这一篇中我们不再介绍编写单元测试的工具而是专注于如何编写可测试的代码。 编写可测试的代码可能比编写单元测试本身更加重要&#xff0c;可测…

酒店客房管理系统设计与实现(论文+源码)_kaic

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本酒店客房管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…

计算机网络(001-1)

计算机网络-方老师 总时长 24:45:00 共50个视频&#xff0c;6个模块 此文章包含1.1到1.4的内容 简介 1.1计算机网络的作用 三网融合&#xff08;三网合一&#xff09; 模拟信号就是连续信号 数字信号是离散信号 1.2互联网概述 以前2兆带宽就要98 现在几百兆带宽也就几百块 …

峟思仪器助力尾矿库安全监测

在矿业领域&#xff0c;尾矿库的安全监测是保障矿山持续、安全运营的关键环节。尾矿库通常用于存放矿山开采过程中产生的固体废物&#xff0c;如果管理不善&#xff0c;可能会造成重大的安全事故&#xff0c;对环境和人类健康造成严重威胁。因此&#xff0c;采用先进的监测技术…

吴恩达深度学习笔记:神经网络的编程基础2.9-2.14

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第二周&#xff1a;神经网络的编程基础 (Basics of Neural Network programming)2.9 逻辑回归中的梯度下降&#xff08;Logistic Regression Gradient Descent&#xff09; 第一门课&#xff…

数字生活的未来:探索Web3的全新世界

随着科技的飞速发展&#xff0c;我们正迈向一个数字化的未来。而在这个数字化的时代&#xff0c;Web3技术的崛起正引领着我们进入一个全新的世界。本文将深入探讨Web3技术的特点以及它给我们带来的全新体验。 1. 去中心化的特点 Web3的去中心化是其最显著的特点之一&#xff0…

基于微信小程序的校园跑腿小程序,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

智慧楼宇物联网建设实施方案(2)

建设方案 楼宇综合管理平台 智慧楼宇物联网应用综合管理系统是对整个物联网系统的集中监控和展示。其主要功能是对各应用子系统的关键监测数据进行数据格式解析并呈现。进而使管理者能够从整体上对整个物联网系统运行状态有个直观的了解。其不同于各专业子系统的管理软件,重…

蓝桥杯单片机快速开发笔记——定时器

一、基本原理&#xff1a; 定时器的作用&#xff1a; 定时器是一种用于产生精确时间延时的模块&#xff0c;可以在程序中用来进行时间控制、计时等操作。 定时器的工作原理&#xff1a; 51单片机的定时器是通过内部的计数器来实现的&#xff0c;计数器每隔一个固定的时间周期自…

Python之Web开发中级教程----创建Django项目

Python之Web开发中级教程----创建Django项目 使用虚拟环境&#xff1a; Workon py3_django3 1.创建Django项目 django-admin startproject name 例&#xff1a;git的本地仓库下新建studentmanager的项目 cd /home/go/work/gtest/ django-admin startproject bookmanager 新…

hadoop伪分布式环境搭建详解

&#xff08;操作系统是centos7&#xff09; 1.更改主机名&#xff0c;设置与ip 的映射关系 hostname //查看主机名 vim /etc/hostname //将里面的主机名更改为master vim /etc/hosts //将127.0.0.1后面的主机名更改为master&#xff0c;在后面加入一行IP地址与主机名之间的…

【CSP试题回顾】201709-3-JSON查询

CSP-201709-3-JSON查询 解题思路 1. 初始化数据结构 map<string, string> strContent: 存储字符串类型属性的内容。键是属性名&#xff08;可能包含通过点.连接的多级属性名&#xff09;&#xff0c;值是属性的字符串值。vector<string> keyVec: 存储当前正在处…

VsCode 使用密钥连接 Centos

在 centos 下生成密钥 ssh-keygen 执行上述命令后&#xff0c;一路回车&#xff0c;直到出现如下界面&#xff1a; 查看密钥生成情况 cd /root/.ssh ls 结果如下所示&#xff1a; 服务器上安装公钥 cd /root/.ssh cat id_rsa.pub >> authorized_keys ls >查看确…

CVE-2024-27199 JetBrains TeamCity 身份验证绕过漏洞2

漏洞简介 TeamCity Web 服务器中发现了第二个身份验证绕过漏洞。这种身份验证旁路允许在没有身份验证的情况下访问有限数量的经过身份验证的端点。未经身份验证的攻击者可以利用此漏洞修改服务器上有限数量的系统设置&#xff0c;并泄露服务器上有限数量的敏感信息。 项目官网…

LAMP网站部署(Discuz论坛网站部署)

目录 mysql命令 语法 选项 参数 实例 安装php 安装Mariadb 关掉防火墙和selinux 启动HTTP服务 初始化数据库 查看数据库是否创建成功 修改HTTP的配置文件 浏览器打开 将以下所有目录都加上权限 最后首页效果 mysql命令 是MySQL数据库服务器的客户端工具&#xff0c;它工作在命…

tomcat的webapp文件中发布web应用

一、Web服务器 1.什么是Web 概述&#xff1a; web(World Wide Web)即全球广域网&#xff0c;也称为万维网&#xff0c;它是一种基于超文本和HTTP的、全球性的、动态交百的、跨平台的分布式图形信息系统。是建立在internet上的一种网络服务&#xff0c;为浏览者在Intern…

【深度学习笔记】9_5 多尺度目标检测

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 9.5 多尺度目标检测 在9.4节&#xff08;锚框&#xff09;中&#xff0c;我们在实验中以输入图像的每个像素为中心生成多个锚框。这些…

物联网技术助力智慧城市转型升级:智能、高效、可持续

目录 一、物联网技术概述及其在智慧城市中的应用 二、物联网技术助力智慧城市转型升级的路径 1、提升城市基础设施智能化水平 2、推动公共服务智能化升级 3、促进城市治理现代化 三、物联网技术助力智慧城市转型升级的成效与展望 1、成效显著 2、展望未来 四、物联网技…

机试:蛇形矩阵

问题描述: 代码示例: //蛇形矩阵 #include <bits/stdc.h> using namespace std;int main(){int n;cout << "输入样例" << endl; cin >> n;int k 1; for(int i 0; i < n; i){if( i %2 0){//单数行for(int j 0; j < n; j){ cout &…