CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合。
- 如果都是正边界,结果的边界宽度是相邻边界宽度中最大的值
- 如果出现负边界,则在最大的正边界中减去绝对值最大的负边界
- 如果没有正边界,则从零中减去绝对值最大的负边界
最终的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是否重叠。
外边距(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;">
<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:left
或display: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垂直方向边界叠加】问题及解决方案的更多相关文章
- CSS盒子模型中()是透明的,这部分可以显示背景()
CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: · Margin(外边距) - 清除边框外的区域,外边距是透明 ...
- CSS样式----盒子模型(图文详解)
盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...
- CSS之盒子模型(深入理解)
CSS--盒子模型(Box Model) 简介: CSS盒子模型本质上是一个盒子,对网页中绝大部分的HTML元素进行包装定位(外边距,边框,内边距以及实际内容). 但是并不是所有的HTML元素都可以看 ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入理解CSS系列(一):理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- CSS的盒子模型(Box Model)
盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...
随机推荐
- 06 返回静态文件的映射(函数/多线程)web框架
06 返回静态文件的映射(函数/多线程)web框架 服务器server端python程序(函数版): import socket server = socket.socket() server.bin ...
- 使用Flutter开发的抖音国际版
简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 先上图,个人感觉使用Flutter开发app快得不要不要的额. 两天就基本可以开发个大概出来. 最主要是热更新,太方便实时调整U ...
- 安装的SQL Server2008 R2版的连接不到本地数据,提示未找到或无法访问服务器。----复制自百度知道
安装的SQL Server2008 R2版的连接不到本地数据,提示未找到或无法访问服务器.使用Windows身份验证 2012-09-17 00:23hj168926 | 分类:数据库DB | 浏览3 ...
- 201771010117—马兴德—实验一 软件工程准备—掌握博客中MarkDown的使用以及通读《现代软件工程—构建之法》的总结
实验一 软件工程的前期准备工作 在前期的准备工作以及老师上课的讲解中,我懂得了"软件=程序+软件工程"这句话的基本含义,以前只是对软件工程有一个很浅显的概念,现在在读了<现代 ...
- C语言基础知识(二)——二维数组
二维数组本质 二维数组本质就是一维数组,只不过**形式是二维**,类似矩阵,使用二维数组表示会更加形象. 二维数组实例 float rain[5][12]; //内含5个数组元素的数组,每个数组元素内 ...
- APM 上报信息分析与应用
在入正题之前我们再回顾下它的架构图: 本文章主要分析AMP各索引的作用,与及结合1.7环境上已接入的服务数据对比后,对索引中的主要字段进行解析.文章分为四个小章节. 1.索引类型 apm索引分为四种类 ...
- Golang源码学习:调度逻辑(二)main goroutine的创建
接上一篇继续分析一下runtime.newproc方法. 函数签名 newproc函数的签名为 newproc(siz int32, fn *funcval) siz是传入的参数大小(不是个数):fn ...
- iOS开发判断手机号及其运营商
根据三大运营商出现的号段(号段来自百度百科) 判断是否是手机号 + (BOOL)isMobile:(NSString *)str { NSString *MOBILE = @"^1(3[0- ...
- 关于mantisBT2.22安装插件Inline column configuration 2.0.0时提示缺少依赖jQuery UI Library 1.8
1.首先直接下载最新的那个1.12即可 https://github.com/mantisbt-plugins/jQuery-UI/releases 2.上传到mantis的插件目录下:……manti ...
- 大O符号初学者指南
原文地址:https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/ 计算机科学中,大O表示法被用来描述一个算法的性能或复杂度. ...