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

两个或多个块级盒子的垂直相邻边界会重合。

  • 如果都是正边界,结果的边界宽度是相邻边界宽度中最大的值
  • 如果出现负边界,则在最大的正边界中减去绝对值最大的负边界
  • 如果没有正边,则从零中减去绝对值最大的负边界

最终的margin值计算方法如下:

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

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

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

注意:相邻的盒子可能并非是由父子关系或兄弟关系的元素生成。

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

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

2、在规范文档中,2个或以上块级盒模型相邻的垂直margin会重叠。

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)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

防止外边距重叠解决方案

问题代码:

 <div style="background: red;">
<div style="margin-top:50px;">margin</div>
</div>

外层元素 overflow:hidden;

 <div style="background: red;overflow:hidden;">
<div style="margin-top:50px;">margin</div>
</div>

外层元素使用padding;

 <div style="background: red;padding-top:1px;">
<div style="margin-top:50px;">margin</div>
</div>

内层元素透明边框 border:1px solid transparent;

 <div style="background: red;border-top:1px solid transparent;">
<div style="margin-top:50px;">margin</div>
</div>

添加一个inline元素:

 <div style="background: red;">&nbsp;
<div style="margin-top:50px;">margin</div>
</div>

内层元素绝对定位 postion:absolute;

 <div style="background: red;">
<div style="margin-top:50px;postion:absolute;">margin</div> </div>

内层元素加float:leftdisplay:inline-block;

 <div style="background: red;">
<div style="margin-top:50px;float:left:display:inline-block;">margin</div>
</div>

内层元素padding:1px;

 <div style="background: red;">
<div style="margin-top:50px;padding:1px;">margin</div>
</div>

CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案的更多相关文章

  1. CSS盒子模型中()是透明的,这部分可以显示背景()

    CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: ·       Margin(外边距) - 清除边框外的区域,外边距是透明 ...

  2. CSS样式----盒子模型(图文详解)

    盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...

  3. CSS之盒子模型(深入理解)

    CSS--盒子模型(Box Model) 简介: CSS盒子模型本质上是一个盒子,对网页中绝大部分的HTML元素进行包装定位(外边距,边框,内边距以及实际内容). 但是并不是所有的HTML元素都可以看 ...

  4. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  5. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  6. 深入理解CSS系列(一):理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  8. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  9. CSS的盒子模型(Box Model)

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

随机推荐

  1. B. Sleepy Game 博弈搜索

    题意:给一个有向图和起点,然后只有一名选手,这名选手可以随意挪动棋子,最终不能动的时候走过的边为奇数边为Win并输出路径,否则如果有环输出Draw,否则输出Lose; 题目链接 知道状态数最多只有n* ...

  2. C语言基础知识(一)——关键字

    存储类别说明符变量:auto.register.static.extern._Thread_local.typedef 存储类型限定符:const.volatile.restrict._Atomic ...

  3. JavaScript Basic

    Exercise-1 Write a JavaScript program to display the current day and time in the following format. T ...

  4. Kubernetes学习笔记(五):卷

    简介 卷是Pod的一部分,与Pod共享生命周期.它不是独立的Kubernetes对象,因此不能单独创建. 卷提供的存储功能不但可以解决容器重启后数据丢失的问题,还可以使数据在容器间共享. 一些卷的类型 ...

  5. JS获取两个日期间的所有日期

    var stime = '2018-07-25'; //开始日期 var etime = '2018-08-02'; //结束日期 getdiffdate(stime,etime); //获取两日期之 ...

  6. Python中对文件的读写

    读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘. 读写文件就是请求操作系统打开一个文件对象(通常称为文件描述符),然后,通过操作系 ...

  7. [PHP学习教程 - 系统]004.通过ini_set()来设置系统属性(ini_set Method)

    PHP原意:ini_set — 为一个系统配置项设置值 基本信息: string ini_set ( string $varname , string $newvalue). (说明:设置指定配置选项 ...

  8. 容器技术之Docker常用命令说明

    前面我们聊了docker的基本概念.架构.镜像.网络.数据卷,回顾请参考https://www.cnblogs.com/qiuhom-1874/category/1766327.html:今天这篇博客 ...

  9. 跟着阿里学JavaDay02——Java编程起步

    几乎所有语言的第一个程序都是"HelloWorld" 就像所有单片机初学者一样,点亮第一个LED灯开始 而起初我们编写/学习Java程序,都是通过记事本来编写的,这里推荐一个Edi ...

  10. WebSocket是什么,有什么作用和特点?

    WebSocket是一种在单个TCP连接上进行全双工通信的协议. Websocket是基于HTTP协议的,或者说借用了HTTP的协议来完成一部分握手.具有持久化的特性 特点: 保持连接状态.与HTTP ...