margin-top塌陷问题的现象与解决
发布日期:2021-09-14 03:23:52
浏览次数:3
分类:技术文章
本文共 969 字,大约阅读时间需要 3 分钟。
什么是margin-top塌陷
margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素边框有一段距离,而却出现了父元素的顶端距离body这个边框出现了位移,这就是margin-top塌陷的现象。
在未给子元素(绿色部分)添加margin-top属性的时候,网页如下图显示: 但是当给子元素加上margin-top属性的时候网页显示就变成了如下图所示: 你会发现,子元素的边界与父元素(黄色部分)的边界距离并没有增大,反而是父元素的上边界与浏览器上边界的距离增大了,也就是父元素带着子元素一起下移了一段距离,经过检查,这段距离也正好等于我们给子元素设置的margin-top的属性值,这就是margin-top塌陷的现象。怎么解决margin-top塌陷
对于margin-top的塌陷问题,可以从以下几点去解决,亲测有效:
1.给父元素增加边框
为了不影响原先的图像效果,可以将边框颜色设置为白色(与浏览器背景颜色一致)
2.溢出隐藏
在父元素的style里面添加overflow:hidden;
3.利用浮动
给父元素的style添加浮动,但是这种方法不推荐使用。因为会带来未知的错误
4.给父元素添加position:fixed;
这里用到了定位的知识,将父元素显示在固定位置,就不会受margin-top塌陷的问题影响
5.给父元素设置display:table;
6.使用伪元素
伪元素之所以被称为伪元素,就是因为他们不是真正的页面元素,html没有与之对应的元素,但是其用法和表现行为和真正的元素一样,所以被成为伪元素。
.clearfix::before{ content: ”; display: table; } .clearfix 是给父元素增加的另外一个类名,这是我们推荐的解决办法,既能解决margin-top塌陷问题,又不会出现其他附加的未知错误。 确定了解决方案以后,现在来看看最终的结果,如下图: 可以看见,现在的位置是子元素相对于父元素在移动,而不会对父元素的位置造成什么影响了。下面附上调试代码:
10-margin-top塌陷
转载地址:https://blog.csdn.net/weixin_40612082/article/details/80461818 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年03月23日 18时26分16秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Vue介绍---vue工作笔记0001
2019-04-26
Vue基本使用---vue工作笔记0002
2019-04-26
微信公众号介绍_以及注册订阅号---微信公众号开发工作笔记0001
2019-04-26
Vue模板语法---vue工作笔记0003
2019-04-26
Vue计算属性之基本使用---vue工作笔记0004
2019-04-26
Vue监视---vue工作笔记0005
2019-04-26
Vue条件渲染---vue工作笔记0008
2019-04-26
Vue事件处理_vue的事件处理超级方便_功能强大---vue工作笔记0011
2019-04-26
Vue表单数据自动收集---vue工作笔记0012
2019-04-26
Vue生命周期---vue工作笔记0013
2019-04-26
C++_类和对象_对象特性_构造函数的分类以及调用---C++语言工作笔记041
2019-04-26
C++_类和对象_对象特性_拷贝构造函数调用时机---C++语言工作笔记042
2019-04-26