目录

谈一下 css 隐藏陷阱,margin 塌陷问题

什么是 margin 塌陷

这个问题主要分为父元素和子元素之间,以及子元素之间,下面分别来说一下。

父元素和子元素之间

通俗点说就是,在一个父元素里,你给第一个子元素设置 margin-top 或者给最后一个子元素设置 margin-bottom,会被父元素抢走,这些会作用在父元素上面,而不会直接作用在子元素上面,例如下面这个栗子:

可以看到,我们给第一个子元素设置了 margin-top 为 100px,但是发现却作用在父元素上了。

同理如果给最后一个元素设置 margin-bottom,也是作用在父元素上面了,这肯定不是我们想要的效果,在开发中,如果你也遇到过类似的问题,一起来看下如何解决吧。

如何解决?

给父元素设置以下其中之一的属性:

只需要设置这些其中之一的属性即可,不需要同时开启这些属性。

border

给父元素设置 1px 的 border

CSS 复制代码
.parent 
     border: 1px solid red; 
    }
padding

给父元素设置 1px 的 padding

CSS 复制代码
.parent 
   padding: 1px;
    }
overflow:hidden

给父元素设置 overflow 为 hidden

CSS 复制代码
.parent {
      overflow: hidden;
      background-color: grey;
    }

display: flow-root(最推荐)

一个新的 display 属性的值,它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。

<div> 元素设置 display: flow-root 属性后,<div> 中的所有内容都会参与 BFC,浮动的内容不会从底部溢出。

你可以从 flow-root 这个值的名字上看出来,它创建一个新的用于流式布局的上下文,行为如同 root(在浏览器中是 <html>)元素。

CSS 复制代码
.parent {
      background-color: grey;
      display: flow-root;
    }
display: inline-block

给父元素设置为行内块元素

CSS 复制代码
.parent {
      background-color: grey;
      display: inline-block;
    }
使 position:absolute position:fixed

给父元素设置为绝对定位或者固定定位

CSS 复制代码
.parent {
      background-color: grey;
      position: absolute;
    }

兄弟元素之间

指的是当两个相邻的兄弟元素margin发生重叠时,最终显示的边距值不是两者的和,而是较大的那个边距值,例如下面的:

第一个子元素设置了margin-bottom: 100px;,第二个子元素设置了margin-top: 100px; bottom和top重叠了,只会取最大的那个,也就是150px

CSS 复制代码
.child1 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 150px;
    }
    
    .child2 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin-top: 100px;
    }

如图所示:

总结

css 的 margin 塌陷现象通常出现在两个相邻块级元素之间或者父子元素之间,导致它们的边距合并成一个较大的边距。可以通过添加边框、内边距、或设置 overflow 属性,display属性,定位等方法来解决这一问题。

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
苏卫苏卫苏卫3 分钟前
【Vue】案例——To do list:
开发语言·前端·javascript·vue.js·笔记·list
05091526 分钟前
测试基础笔记第四天(html)
前端·笔记·html
聪明的墨菲特i1 小时前
React与Vue:哪个框架更适合入门?
开发语言·前端·javascript·vue.js·react.js
时光少年1 小时前
Android 副屏录制方案
android·前端
拉不动的猪1 小时前
v2升级v3需要兼顾的几个方面
前端·javascript·面试
时光少年1 小时前
Android 局域网NIO案例实践
android·前端
半兽先生1 小时前
VueDOMPurifyHTML 防止 XSS(跨站脚本攻击) 风险
前端·xss
冴羽1 小时前
SvelteKit 最新中文文档教程(20)—— 最佳实践之性能
前端·javascript·svelte
Jackson__2 小时前
面试官:谈一下在 ts 中你对 any 和 unknow 的理解
前端·typescript
zpjing~.~2 小时前
css 二维码始终显示在按钮的正下方,并且根据不同的屏幕分辨率自动调整位置
前端·javascript·html