margin塌陷和margin合并

最新推荐文章于 2022-07-18 11:42:19 发布

shuoxi666

最新推荐文章于 2022-07-18 11:42:19 发布

阅读量169

点赞数

分类专栏：面试

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/shuoxi666/article/details/108537251

版权

本文详细介绍了CSS中的margin塌陷现象，即父子元素在垂直方向的margin取最大值，导致布局异常。通过示例展示了margin塌陷的效果，并提供了四种解决方法，包括触发BFC（Block Formatting Context）。同时，还解释了margin合并，即相邻兄弟元素垂直margin的合并行为，及其在实际布局中的影响。

摘要由CSDN通过智能技术生成

margin塌陷

什么是margin塌陷

父子元素在垂直方向的margin，父子元素是结合在一起的，他们两个的margin会取两者的最大值，正常情况下，父级元素相当于浏览器定位，子级元素相当于父级元素进行定位，但由于margin塌陷，父级相当于浏览器定位，而子级没有相对父级定位，这就是margin塌陷

例子：

    <div class="father">
        <div class="son"></div>
    </div>

最低0.47元/天解锁文章

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
margin塌陷和margin合并

margin塌陷什么是margin塌陷父子元素在垂直方向的margin，父子元素是结合在一起的，他们两个的margin会取两者的最大值，正常情况下，父级元素相当于浏览器定位，子级元素相当于父级元素进行定位，但由于margin塌陷，父级相当于浏览器定位，而子级没有相对父级定位，这就是margin塌陷例子： <div class="father"> <div class="son"></div> </div> &l
复制链接

扫一扫

专栏目录

shuoxi666 CSDN认证博客专家 CSDN认证企业博客

码龄7年

80: 原创

8万+: 周排名

100万+: 总排名

6万+: 访问

: 等级

1137: 积分

7: 粉丝

28: 获赞

13: 评论

92: 收藏

私信

关注

热门文章

分类专栏

面试 21篇
css 4篇
es6 9篇
vue 2篇
小题 2篇
方法 1篇
jquery 2篇
c语言并查集 1篇
java基础 4篇
Java学习 5篇
jsp 4篇
解决问题 3篇
js 8篇
html 1篇

最新评论

js实现别踩白块
2401_86651785: <hr/> <style type="text/css"> body{ background: url("Screenshot_2024-08-11-03-15-20-72_979efe3448f8118929a75114c329c025.jpg") no-repeat center center fixed; /*兼容浏览器版本*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <script language="javascript">  </script> <!doctype html> <html> <body>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="js/jq.js"></script> </head> <body id="v1"> </body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div> <video src="1723313935456.mp4" controls width="500px" height="500px"> </video> </div> </body> <script> //获得video标签的DOM var videolist = document.getElementsByTagName('video') console.log("获得video的DOM",videolist) window.addEventListener('wheel',function (event) { videolist[0].src = 'http://127.0.0.1:3000/image/22.mp4' }) </script> </html> <hr/> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div> <video src="1723314242070.mp4" controls width="500px" height="500px"> </video> </div> </body> <script> //获得video标签的DOM var videolist = document.getElementsByTagName('video') console.log("获得video的DOM",videolist) window.addEventListener('wheel',function (event) { videolist[0].src = 'http://127.0.0.1:3000/image/22.mp4' }) </script> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div> <video src="1723314316560.mp4" controls width="500px" height="500px"> <>/video> </div> </body> <script> //获得video标签的DOM var videolist = document.getElementsByTagName('video') console.log("获得video的DOM",videolist) window.addEventListener('wheel',function (event) { videolist[0].src = 'http://127.0.0.1:3000/image/22.mp4' }) </script> </html> <hr/> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div> <video src="video_240630_153307.mp4" controls width="500px" height="500px"> </video> </div> </body> <script> //获得video标签的DOM var videolist = document.getElementsByTagName('video') console.log("获得video的DOM",videolist) window.addEventListener('wheel',function (event) { videolist[0].src = 'http://127.0.0.1:3000/image/22.mp4' }) </script> </html> <hr/> <html> <head> <title>WebCat</title> <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="js/jq.js"></script> </head> <body id="v1"> </body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div> <video src="video_240630_153138.mp4" controls width="500px" height="500px"> </video> </div> </body> <script> //获得video标签的DOM var videolist = document.getElementsByTagName('video') console.log("获得video的DOM",videolist) window.addEventListener('wheel',function (event) { videolist[0].src = 'http://127.0.0.1:3000/image/22.mp4' }) </script> </html> <hr/> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div> <video src="video_240630_153224.mp4" controls width="500px" height="500px"> </video> </div> </body> <script> //获得video标签的DOM var videolist = document.getElementsByTagName('video') console.log("获得video的DOM",videolist) window.addEventListener('wheel',function (event) { videolist[0].src = 'http://127.0.0.1:3000/image/22.mp4' }) </script> </script> <ins><hr/>
最详细的最短路径问题
m0_62289373: 这是最详细吗
DOM 中attribute 和 property的区别
CN_LuoBei: 比那些长篇大论好理解多了
DOM 中attribute 和 property的区别
hellocarrots: 写的很好，明白了，感谢分享！
java 位运算符（左移与右移）
静谧之心: 分享技术,共勉!

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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