边距重叠解决方案

最新推荐文章于 2023-04-12 16:47:42 发布
最新推荐文章于 2023-04-12 16:47:42 发布
阅读量501 收藏 1
点赞数 1
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42308316/article/details/121224282
版权

当两个块级兄弟元素上下布局时,假设第一个块的下边距是10,第二个块的上边距是8,他们的间隔是10而非18. 这就是边距重叠问题.

解决边距重叠(也就是创建bfc)主要有三种方案

一.浮动

浮动float除了none外都可以解决

二.定位

position除了static和relative都可以

三.display

table-caption(会影响布局,效果不佳),table-cell(第二个块的下边距会消失),inline-block(效果最好)都行

鱼泡泡~
关注
浅析 CSS 中的边距重叠
happyCoding1024的博客
04-23 604
边距重叠是什么 在说边距重叠之前，先以正常的思维来考虑如果你现在是浏览器引擎遇到这种情况应该怎么办？ 现在有两个元素 div1 和 div2 紧挨着，中间没有它元素，它们的外边距就会发生重叠。div1 在左，div2 在右，div1 的 margin-left 为 20px， div2 的 margin-right 为 30px，那两个元素应该距离多少呢？ 50px 吗？应该不是的，如果是 50p...
关于css中margin的值和垂直外边距重叠问题
01-22
并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的! <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title></title> <style type=text/css> *{margin: 0;padding: 0;} .box1,.box2{ width: 200px; height: 200px; } .box1{
什么是BFC规范，你对他有什么理解
qq_44441669的博客
01-07 391
定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区 域外部毫不相干。 布局规则： A. 内部的 Box 会在垂直方向，一个接一个地放置。 B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两...
边距重叠及解决方法
yin_991的博客
01-28 3575
边距重叠有三种情况 边距重叠指的是盒子垂直方向的边距重叠问题 1、父子元素之间的边距重叠 2、兄弟元素之间的边距重叠 3、空元素设置了外边距之后的高度 解决方法：创建BFC（块级格式化上下文） BFC的原理（渲染规则） 由于BFC这个元素的垂直方向会发生边距重叠，创建了BFC的区域不会与浮动元素的边距重叠，BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，里面的元素也不...
BFC
李天下
06-16 944
1.BFC的概念 BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。 另外还有个概念叫IFC。不过，BFC问得更多。 2.BFC 的原理/BFC的布局规则【非常重要】 BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括： （1）BFC 内部的子元素，在垂直方向，边距会发生重叠。 （2）BFC在页面...
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 1万+
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
详解CSS边距重叠与解决方案探究
01-18
最近复习了一下CSS相关的知识点，对于CSS中经典的边距重叠问题进行了梳理总结，目的是检验复习效果，也希望对他人有所帮助，疏漏之处还请各位前端老鸟们不吝赐教。 提出问题：在使用CSS排版布局时，会发现兄弟或者...
详解css边距重叠的几种解决方案
09-27
文章《详解css边距重叠的几种解决方案》讨论了多种处理CSS边距重叠的方法。以下内容将对这些方法进行详细解读： 1. 使用内边距（padding） 通过给父元素添加内边距可以阻止边距重叠的发生。因为内边距（padding）是...
解决外边距重叠问题
zxpyyds的博客
03-30 434
若子元素设置外边距margin-top: 50px; 发现并不是子元素下移50px而是父元素一起下移，这就是外边距问题。 解决办法：在父元素内容区顶部放置一个空内容，使得父子元素隔开。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ...
边距重叠问题
qq_39529315的博客
11-29 305
1:在布局的时候会碰见子元素设置边距影响父元素的情况，对已经布局好的界面产生影响。 .parent{ width: :300px; height: 300px; background-color: green; } .child{ width: 200px; height: 200px; background-color: blue; } ...
Margin 边距重叠问题
qq_34078881的博客
08-07 451
DIV+CSS 实战 之 margin边距重叠问题 (2) 2.)margin边距冲突 边距折叠问题 在div+css 实战中 使用margin 属性时 当一个元素处在另一个元素里面时,事情就变得更不可思议了。这种情况可能导致一些令人头疼的问题出现。  例如:   div+css 实战   div {margin-top:20px; margin
外边距重叠问题
u011150251的博客
04-12 421
外边距重叠也可以称之为外边距塌陷，见名可知其意，外边距重叠就是不同元素上下外边距重叠到一起。
margin上下边距重叠的两种情况
里略乐勒卢的博客
06-24 2765
很多初学者对HTML中margin的外边距初有了解，所了解的基本概念是margin是盒子模型的外边框，包括上右下左四个属性。而且两个盒子左右边框之间的距离为左右边距的叠加值，而两盒子上下的距离为二者上下margin值中最大的那一方的值。但是还有一种情况是两盒子上下距离为二者上下margin值的和，这种情况为设置float浮动后，上下边框叠加不遵守原规则。举个例子：如上图所示，是一个外边框宽为70p...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
weixin_32566515的博客
08-04 2481
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况：1、...
关于margin上下重叠的问题
热门推荐
icesschen的博客
09-05 1万+
有两种情况：1、兄弟级的块之间，margin这个属性上下边距，经常会发生重叠的情况，以数值大的为准，而不会相加。 2、父子级的块之间，子级的上下margin会与父级上下margin重叠，以数值大的为准，而不会相加。 如何解决？第一种情况：1、float浮动或者 2、inline-block第二种情况：父级加1、overflow:hidden或者 2、加padding 或者3、加border 或者子
解决方法 一.高度塌陷和 二.垂直外边距重叠的问题
Lrj_estranged的博客
11-10 2171
一：高度塌陷问题 （1）产生的原因：1.在文档流中，父元素的高度默认被子元素撑开                                    2.当子元素浮动脱离文档流，无法继续撑起父元素高度，导致父元素塌陷，会使页面混乱， （2）效果如下图： 在文档流中，父元素高度默认被子元素撑开: 设置子元素浮动后，导致父元素高度塌陷： （3）解决方法： 使用cle
详解 CSS 外边距重叠(外边距塌陷)问题及解决办法
m0_46862838的博客
09-30 7342
边距重叠这个问题之前遇到过，但是并没有太在意，最近多次遇到，就去查了一下。 边距重叠就像字面意思一样，两边距重叠到一起了。 官方一点解释就是： 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 而造成外边距重叠有 三种情况： 第一种情况：发生在同一层相邻元素之间 ...
aspose 字体重叠
最新发布
08-25
对于 Aspose 字体重叠的问题，可能有以下几种解决方法： 1. 检查字体文件：首先，请确保您使用的字体文件是完整的且没有损坏。可以尝试使用其他字体文件进行测试，以确定是否与特定字体文件相关。 2. 设置正确的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值