这篇文章主要讲解了“CCS中的margin塌陷什么意思，怎么解决塌陷”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CCS中的margin塌陷什么意思，怎么解决塌陷”吧！

HTML结构如下：

CCS结构如下：

页面效果图如下：

现在我们可以看到在子元素中明明设置了向右50px和向下50px，可页面显示的效果却只有向右移动的没向下移动的。

通常来说，margin是设置元素的外边距，正常情况下设置margin值时应该是父元素相对于浏览器定位，子元素相对于父元素定位；而现在设置了

margin-top: 50px，页面却没效果这就说明是margin塌陷。

那什么是margin塌陷呢？

　　在子级中当设置margin-top: 50px;时,里面的盒子并没有改变，但是在给子元素设置margin-top: 150px;大于父盒子的高度时,子元素就不会再相对于父元素定位了而是带着父元素一起相对于浏览器去定位向下移动150px;这就说明是margin塌陷。(margin塌陷是在父级相对于浏览器进行定位时而子级并没有相对于父级定位，子级相对于父级就像塌陷了一样)

当我们把margin-top: 50px调成大于父级元素的高度时，子元素就不会再相对于父元素定位了而是带着父元素一起相对于浏览器去定位向下移动150px;
页面效果图如下：

要想解决margin塌陷问题就嘚使用bfc的概念：

bfc是指：block format context(块级格式上下文),触发bfc的元素将会改变一小部分的渲染规则，可用于解决些css的疑难bug；

触发bfc的元素有：
 

position：absolute;
display：inline-block;
float：left/right;
overflow：hidden;

CSS结构如下：

页面效果如下：

通过以上任意一行即可弥补margin塌陷的问题~

以上就是关于“CCS中的margin塌陷什么意思，怎么解决塌陷”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS3怎样实现NES游戏机的动画效果?

  这篇文章给大家分享的是用CSS实现NES游戏机的动画效果的内容。对大家学习CSS3使用有一定的帮助，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• 如何使用HTML5+JS制作动态音频图，方式及过程是什么

  这篇文章主要介绍了HTML5开发动态音频图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS3过渡效果的实现使用什么方法呢

  小编主要为大家详细介绍下如何利用CSS3做一些过渡效果的内容，用CSS3做一些过渡效果和动画，特别适合Web前端开发员学，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧。

• CSS图片添加边框有几种方法，用哪些属性

  图片添加边框效果的方法1、打开HTML代码软件，建立一个代码，添加图片效果有两种方法一方法：图片添加描边或者是给外面的盒子。二方法：就是直接在img图片标签。两项选一，我用是二方

• CSS中如何实现边框的凸出效果，方法是什么？

  CSS中如何实现边框的凸出效果?边框的凸出效果看起来有3D的效果，是很多朋友喜欢用的。在CSS中要实现这样的效果我们可以使用border-style属性设置outset值，就可以设置元素边框为凸起了，下面我们来具体的了解看看。