CSS外边距(margin)重叠及防止方法

#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法

#1-什么是外边距margin重叠1. 什么是外边距(margin)重叠

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

#2-相邻marign重叠的问题2. 相邻marign重叠的问题

#21-示例2.1 示例

<style>*{margin:0;padding: 0;}.divout{width: 100px;height: 100px;background: yellow;margin-bottom: 50px;border: 1px solid black;}.divout1{width:50px;height: 50px;background: yellow;margin-top: 80px;/*float:left;*//*position:absolute;*/border: 1px solid black;}
</style>
<body><div class="divout">        </div><div class="divout1">        </div>
</body>
复制代码

#22-外边距重叠计算方式2.2 外边距重叠计算方式

  • 全部都为正值,取最大者;

  • 不全是正值,则都取绝对值,然后用正值的最大值减去绝对值的最大值;


  • 没有正值,则都取绝对值,然后用0减去最大值。

#23-解决办法2.3 解决办法

底部元素设置为浮动 float:left;

底部元素的position的值为absolute/fixed

在设置margin-top/bottom值时统一设置上或下

#3-元素和父元素margin值问题3. 元素和父元素margin值问题

父元素无 border、padding、inline content 、 clearance时,子元素的margin-top/bottom会与父元素的margin产生重叠问题。

#31-示例3.1 示例

<style>*{margin:0;padding: 0;color: black;}#parrent{width:300px;height:150px;margin-top: 20px;background:teal;}#box1{width:100px;height:100px;background:aqua;margin:100px 0;}
</style>
<body><div id="parrent"><div id="box1">我是box1</div>我是内容</div>
</body>
复制代码

#32-解决办法3.2 解决办法

  • 外层元素添加padding
  • 外层元素 overflow:hidden;
  • 外层元素透明边框 border:1px solid transparent;
  • 内层元素绝对定位 postion:absolute:
  • 内层元素 加float:left;或display:inline-block;

#4-相关文章

史上最全面、最透彻的BFC原理剖析

CSS清浮动处理(Clear与BFC)

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

但是边界的重叠也有例外情况:

1、水平边距永远不会重合。

2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下:

a、全部都为正值,取最大者;

b、不全是正值,则都取绝对值,然后用正值减去最大值;

c、没有正值,则都取绝对值,然后用0减去最大值。

注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

3、相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。

4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。

5、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,并且和他们的子元素之间也是一样。

6、设置了display:inline-block的元素,垂直margin不会重叠,甚至和他们的子元素之间也是一样。

7、如果一个盒模型的上下margin相邻,这时它的margin可能重叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否重叠。

a、如果元素的margin和它的父元素的margin-top重叠在一起,盒模型border-top的边界定义和它的父元素相同。

b、另外,任意元素的父元素不参与margin的重叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。

一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。

注意,那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。

8、根元素的垂直margin不会被重叠。

外边距(margin)重叠示例

外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。

图示:

另一个重叠现象是当一个元素包含在另一个元素之中时,子元素与父元素之间也会产生重叠现象,重叠后的外边距,等于其中最大者:

同理,如果一个无内容的空元素,其自身上下边距也会产生重叠。

外边距重叠的意义

外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

防止外边距重叠解决方案:

虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:

  1. 外层元素padding代替
  2. 内层元素透明边框 border:1px solid transparent;
  3. 内层元素绝对定位 postion:absolute:
  4. 外层元素 overflow:hidden;
  5. 内层元素 加float:left;或display:inline-block;
  6. 内层元素padding:1px;

以上建议可根据实际情况来采取。

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

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

相关文章

composer windows安装

一.前期准备: 1.下载安装包,https://getcomposer.org/download/ 2.在php.ini文档中打开extensionphp_openssl.dll 3.下载php_ssh2.dll、php_ssh2.pdb,http://windows.php.net/downloads/pecl/releases/ssh2/0.12/ 4.把php_ssh2.dll、php_ssh2.pdb文件放php的ext文件夹 5.重启ap…

spring整合mybatis采坑

本来这个错误是整合spring和mybatis遇到的错误&#xff0c;但是一直没有解决&#xff0c;但是在做SpringMVC时也了出现了这样的错误org.springframework.beans.factory.BeanCreationException: Error creating bean with name sqlSessionFactory defined in class path resourc…

处理测试环境硬盘爆满

测试环境经常会收到这类告警 第一步 登陆机器查看硬盘使用 执行df 好吧,使用情况真不妙,根目录占用过大 第二步 确定哪个文件太大或者文件过多 进入爆满的目录,如这里是根目录 cd / 然后找下面哪个文件夹或者文件太大,有几种方式: 1.dusudo du -h --max-depth1 | sort -hr 越前…

LeetCode-46. Permutations

一、问题描述 就是全排列问题。 二、问题解决 应该哪一本数据结构的书上都有讲了。 void get_permute(vector<int>& nums, int pos, vector<vector<int>>& result) {if (nums.size() pos) {result.push_back(nums);return;}for (int i pos; i <…

web操作系统开发的_哪种操作系统更适合Web开发

web操作系统开发的If youre new to web development and are in the market for a new laptop, you might be wondering which operating system is best.如果您是Web开发的新手&#xff0c;并且正在购买新的笔记本电脑&#xff0c;您可能想知道哪种操作系统是最好的。 Spoile…

白鹭引擎 - 显示对象的基准点与横纵坐标 ( 绘制一个来回移动的绿色方块 )

class Main extends egret.DisplayObjectContainer {/** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 super )* constructor 是类的构造函数, 类在实例化的时候调用* egret.Event.ADDED_TO_STAGE, 在将显示对象添加到舞台显示列表时调度*/…

SpringBoot项目属性配置

我们知道&#xff0c;在项目中&#xff0c;很多时候需要用到一些配置的东西&#xff0c;这些东西可能在测试环境和生产环境下会有不同的配置&#xff0c;后面也有可能会做修改&#xff0c;所以我们不能在代码中写死&#xff0c;要写到配置中。我们可以把这些内容写到applicatio…

670. 最大交换

670. 最大交换 给定一个非负整数&#xff0c;你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。 示例 2 : 输入: 9973 输出: 9973 解释: 不需要交换。 解题思路 目标就是优先锁定高位&#xff0c;像…

flexbox布局_Flexbox vs Grid-如何构建最常见HTML布局

flexbox布局There are so many great CSS resources all over the internet. But what if you just want a simple layout and you want it NOW? 互联网上有很多很棒CSS资源。 但是&#xff0c;如果您只是想要一个简单的布局而现在就想要呢&#xff1f; In this article, I d…

789. 逃脱阻碍者

789. 逃脱阻碍者 你在进行一个简化版的吃豆人游戏。你从 [0, 0] 点开始出发&#xff0c;你的目的地是 target [xtarget, ytarget] 。地图上有一些阻碍者&#xff0c;以数组 ghosts 给出&#xff0c;第 i 个阻碍者从 ghosts[i] [xi, yi] 出发。所有输入均为 整数坐标 。 每一…

计算机视觉-自定义对象检测器

1、模板匹配 运行指令&#xff1a;python template_matching.py --source 3.jpg --template 2.jpg import argparse import cv2ap argparse.ArgumentParser() ap.add_argument("-s", "--source", requiredTrue, help"Path to the source image"…

Java 微信公众号导出所有粉丝(openId)

由于公众号换了公司主体&#xff0c;需要做迁移&#xff0c;玩家的openId数据需要做处理。 (我是按我要的json格式&#xff0c;将粉丝导成了1万条数据的一个json文件) 文件格式&#xff1a; {"info":[{"openId":"ogVous494ltuNmO4zHb1seHeGLSk"}…

javascript闭包_JavaScript闭包教程–带有JS闭包示例代码

javascript闭包Closures – many of you JavaScript devs have probably heard this term before. When I started my journey with JavaScript, I encountered closures often. And I think theyre one of the most important and interesting concepts in JavaScript. 闭包–…

1646. 获取生成数组中的最大值

1646. 获取生成数组中的最大值 给你一个整数 n 。按下述规则生成一个长度为 n 1 的数组 nums &#xff1a; nums[0] 0 nums[1] 1 当 2 < 2 * i < n 时&#xff0c;nums[2 * i] nums[i] 当 2 < 2 * i 1 < n 时&#xff0c;nums[2 * i 1] nums[i] nums[i …

docker保存日志文件到本地

其实很简单 docker logs 你需要添加的额外参数 容器id >文件名称 然后查看这个文件就可以了&#xff0c;也可以通过ftp协议下载到本地

防反射JavaScript –如何让您的JS等待

Debounce methods do not execute when invoked. Instead, they wait for a predetermined time before executing. If the same method is called again, the previous is cancelled and the timer restarts.防抖动方法在调用时不执行。 而是&#xff0c;它们在执行之前等待预…

21天学通Visual.Basic pdf

下载地址&#xff1a;网盘下载《21天学通Visual Basic(第2版)》是Visual Basic 6.0的入门教程&#xff0c;主要针对没有程序设计基础的读者&#xff0c;详细介绍了Visual Basic 6.0的基本概念和编程技术。书中通过大量的范例及综合练习来介绍Visual Basic 6.0的基本概念、语言特…

297. 二叉树的序列化与反序列化

297. 二叉树的序列化与反序列化 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传输到另一个计算机环境&#xff0c;采取相反方式重构得到原数据。 请设计一个算法来实现…

交互式图表_如何构建罗马数字转换器和交互式罗马数字图表

交互式图表The Roman numerals are no longer an essential part of our daily lives. But we do use them when designing monuments, clocks, and even for sporting events.罗马数字不再是我们日常生活中必不可少的部分。 但是我们在设计纪念碑&#xff0c;钟表甚至体育赛事…

Python 08 面向对象

Python 面向对象 1、编程范式 2、面向对象特性 3、属性、方法 4、三大特性 5、高级方法 6、类的特殊成员方法 7、反射 8、异常处理 9、单例模式 一、编程范式 编程&#xff1a;程序员用特定的语法数据结构算法组成的代码来告诉计算机如何执行任务的过程 &#xff0c; 实现一个…