maigin塌陷解决方案

最新推荐文章于 2021-11-15 21:30:23 发布

shuoxi666

最新推荐文章于 2021-11-15 21:30:23 发布

阅读量273

点赞数

分类专栏： html

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

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

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

margin塌陷问题：

子元素和父元素在垂直方向上的移动有问题，子元素不能相对与父元素在垂直方向上移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="my.css">
</head>
<body>
       <div id = 'one'>
           <div id = 'two'></div>
       </div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
#one{
    margin-left:50px;
    margin-top:100px;
    width:200px;
    height:200px;
    background-color:black;
}

#two{
    margin-left:50px;
    margin-top:50px;
    width:100px;
    height:100px;
    background-color:green;
}

运行结果：

子元素不能相对与父元素在垂直方向上移动

解决方案：

使用bfc解决

触发bfc的方法：

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden; //溢出父元素的部分隐藏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
maigin塌陷解决方案

margin塌陷问题：子元素和父元素在垂直方向上的移动有问题，子元素不能相对与父元素在垂直方向上移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫

专栏目录

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、付费专栏及课程。