margin塌陷问题

最新推荐文章于 2024-03-07 21:23:52 发布
最新推荐文章于 2024-03-07 21:23:52 发布
阅读量222 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luobida222/article/details/79604725
版权

什么叫margin塌陷问题，就是当div里面的div想相对外面的div有一个margin时，你会发现这时里面的div的margin要么无效，要么带着外面的div一起动，要么直接溢出

然而这时浏览器天生的bug，官方目前也没什么解决办法，但时常遇到这个问题的众路大神们发现了触发bfc时，可以解决这个问题，那么问题就来到了如何触发bfc？目前我已知的办法，有overflow:hidden;,这个有一个缺点，就是他的本意是截断溢出，所以你实现了位移的问题但是解决不了溢出的问题，还有display:inline-block;和position:absolute

小落0117
关注
专栏目录
【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-21 243
【background-position】属性，设置图片的位置，取值：left、right、center、top、middle、bottom。【background-attachment】属性，设置图片和内容的依附方式，取值：fixed表示图片固定不动。【background-repeat】属性，图片是否重复，取值：no-repeat不重复、repeat重复。【background-image】属性，设置背景图片，取值：url(图片地址)。【background-color】属性，设置背景颜色。
CSS高度塌陷问题（float塌陷&margin塌陷）
YANGMENGZHENG的博客
11-08 2554
一、什么是盒子高度塌陷？ 1、解释 当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。 2、代码示例 ...
解决margin塌陷问题
efew212efe的博客
04-07 2175
day1记录----解决margin塌陷问题 同级元素的塌陷 当上下连个div，上面的div设置了margin-bottom:100px,下面的div设置了margin-top:100px, 我们知道正常情况下，上下两个div距离200px。但是实际只有100px，这就是因为margin塌陷 解决方案 我们可以在任意一个div的外面嵌套一个div，给他一个样式class，添加一个属性为:overflow:hidden, 这就是BFC—块级格式化上下，能够很好的解决margin塌陷 ...
margin塌陷问题与合并问题
Sunshineanl的博客
04-25 3888
margin塌陷问题与合并问题margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫margin塌陷问题。mar
Margin塌陷问题
miqimiaomiaowus的博客
07-03 413
一、当父元素中第一个子元素设置margin-top时，目的是设置子元素与父元素顶部的距离，实际上却实现的是父元素和上一个元素的顶部距离，这种现象称之为margin塌陷。上方元素设置 margin-bottom，下方设置margin-top,最终两个元素之间的距离不等于两个margin之和。当父元素的高度设置为auto或不写，同时内部子元素设置了浮动属性时，父元素的高度会发生自身塌陷。无需解决，当需要设置两个元素之间的垂直距离时，为其中的一个元素设置margin即可。三、元素自身的塌陷问题。
解决margin塌陷与margin合并（margin）清除浮动问题
12-10
问题：垂直方向的父子关系的盒子使用不当会产生margin塌陷。给子级设置margin-top时，他不会相对父级一起动，只有他的margin超过父级的margin时，才会生效，但会带着父级一起动（作者总结，官方定义自己查看）。如：...
解决CCS中的margin：top塌陷问题
11-21
为了解决margin塌陷问题，我们可以利用"块级格式化上下文"(BFC，Block Formatting Context)的概念。BFC是一种特殊的渲染规则，创建BFC的元素会独立于其外部元素进行布局，避免了margin塌陷的影响。以下是一些可以...
margin的塌陷问题，合并问题
mwm2378的博客
03-07 251
margin的塌陷问题，合并问题
margin 塌陷及合并问题
疏狂吧
06-24 788
margin塌陷问题： 以父子关系结合的两个元素，在垂直方向上margin会粘合在一起，外层盒模型的margin-top取两个元素中margin-top较大的值。 正常的情况下内层元素是相对于外层元素进行移动，发生margin塌陷时内层元素却相对于整个文档进行移动。 margin塌陷问题例子演示如下：设置一个父元素div套一个子元素div (父元素边框100px 子元素边框50px...
CSS基础知识：margin塌陷问题和解决方案
我就知道你会来，我们一起进步吧！
02-04 845
margin塌陷问题，对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
margin塌陷问题的理解和原理
qq_53963503的博客
11-29 1048
margin塌陷问题的理解和原理
margin塌陷现象的解决办法
齐枫的博客
07-01 1132
给父容器加 1、border/padding-top 2、overflow:hidden/auto/scroll 3、position不是static也不是relative 4、float不是none 5、display是table-cell或者inline\inline-block
有遇到过margin重叠/塌陷问题吗？BFC?
小草莓的博客
04-17 1314
1、什么是margin重叠/塌陷？ 2、开发中常见的margin塌陷 3、出现margin塌陷的原因 4、什么是BFC？ 5、BFC的6个特性 6、BFC的功能总结 7、触发BFC的CSS属性 8、解决margin塌陷的办法 ① 对于父子元素 ② 对于兄弟元素
css中常见margin塌陷问题之解决办法
codingWeb的博客
09-21 322
当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 ①垂直并列 首先设置两个DIV,并为其制定宽高 <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> /*CSS部分*/ <style>...
margin塌陷
weixin_30563319的博客
04-04 231
一：什么是margin塌陷 在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者paddingmargin直接接触，就产生了合并表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象 二：margin塌陷的分类 1、兄弟关系的盒子2、父子关系的盒子 ...
margin塌陷或margin折叠问题
最新发布
10-16
解决margin collapse的问题通常有几种策略： - 对于相邻元素，添加非零 `border`、`padding` 或者给元素添加 `box-sizing` 属性为 `border-box` 可以防止塌陷。 - 使用 `margin-top` 或 `margin-bottom` 相互抵消。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值