上下margin传递

最新推荐文章于 2024-07-25 15:03:56 发布
最新推荐文章于 2024-07-25 15:03:56 发布
阅读量59 收藏
点赞数
分类专栏： css 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C_x_330/article/details/127913524
版权

上下margin传递

margin-top传递

  • 如果块元素的顶部线和父元素的顶部线重叠,那么这个块元素的margin-top值会传递给父元素

margin-bottom传递

  • 如果块级元素的底部线和父元素的底部线重写,并且父元素的高度是auto,那么这个块级元素的margi-bottom值会传递给父元素

如何防止出现传递问题

  • 给父元素设置padding-top\padding-bottom
  • 给父元素设置border
  • 出发BFC :设置overflow为auto

总结

  1. margin一般用来设置兄弟元素之间的间距
  2. padding一般用来设置父子元素之间的间距
C_x_330
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
margin的传递和折叠
coderlhj666的博客
05-26 605
margin的传递和折叠 一、margin的上下传递(一般发生在父子元素之间) margin-top传递 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素 为什么会产生传递呢？ 原因很简单：w3c的人设计的时候可能考虑到既然父子是近挨着的，子元素没必要设置外边距，给父元素设置更适合 解决方案： 1、给父元素设置overflow：auto，触发BFC 2、给父元素设置padding-top、padding-bottom 3、给父元素设
JavaScript设置Div的margin参数
09-13
`，那么上下边距将设置为第一个值（20px），左 右边距将设置为第二个值（40px）。 三个参数 当我们设置 margin 属性为三个值时，例如 `margin: 20px 40px 60px;`，那么上边距将设置为第一个值（20px），左 右边距将...
CSS中上下margin的传递和折叠
qq_52732369的博客
12-22 1185
CSS中上下margin的传递和折叠
margin传递问题
CurtainOfNight的博客
04-21 1029
margin传递问题   在HTML的嵌套结构中，有时候想用margin来调整位置时发现子类调整会影响到父类！？但是这种传递问题只出现在margin-top，左右下不会有影响！ 解决方法： BFC规范； 給父容器添加边框（这个方法不是很好，因为有时候父容器不要添加边框）； 把margin换成padding，在父容器添加padding也可以达到同样的效果 注意： 当父...
css中margin传递问题
qq_37805832的博客
09-07 986
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .father { width: 200px; height: 200px; back
html5文字用margin做重叠,上下margin重叠传递问题
weixin_42527464的博客
06-03 356
下面的几个部分应该是margin重叠问题的所有情况了：1、两个普通元素上下的margin会合并为一个margin，哪个大选哪个！两个浮动元素不会出现margin传递的问题，依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值。2、两个元素如果是包含关系，父元素和子元素上下margin值也会合并(推荐学习：CSS视频教程)当父元素不加边框，不设置...
上下margin重叠传递问题
meiniada的专栏
12-01 596
http://www.cnblogs.com/ningyn0712/p/5369024.html
web前端基础学习之margin上下传递
m0_64148419的博客
11-13 299
web前端基础知识之上下margin传递
margin传递，子元素的上下margin会传递给父级
weixin_34004750的博客
02-28 132
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #box{ background:red;} 8 #div{width:200px;hei...
angularjs实现文字上下无缝滚动特效代码
10-21
`slide-follow`指令被用来插入列表项，并通过`dataset-data`属性传递数据。 JavaScript部分定义了我们的AngularJS应用和相关组件： ```javascript var app = angular.module("tip", []); app.controller(...
JS 控制GRIDVIEW 上下无间隙滚动
12-23
在`fetchMoreData`函数中，我们可以发送一个请求，将当前的页数或偏移量传递给服务器，然后将新数据添加到GridView中。 ```javascript function fetchMoreData() { var currentPage = Math.ceil((scrollTop + ...
详解Android ScrollView嵌套EditText出现的滑动问题
01-04
但要求当输入字数过长时需要上下滑动以便查看所有文字,因为页面底部有一个”确定”的button,但刚开始输入框内的问题怎么都滑动不了,我一开始就想到了这是事件传递冲突问题,但试了很多种方法都不行,最后也是一个一个...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 825
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1026
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 606
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 285
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
最新发布
程序员象漂亮的博客
07-25 240
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
传递多个参数绑定模态窗口确认按钮后执行html
06-09
以下是一个简单的示例HTML代码，展示如何传递多个参数绑定模态窗口确认按钮后执行： ```html <!DOCTYPE html> <html> <head> <title>传递多个参数绑定模态窗口确认按钮后执行</title> </head> <body> <button id="openModalBtn">打开模态窗口</button> <div id="myModal" class="modal"> <div class="modal-content"> <h2>请输入参数</h2> <label for="input1">参数1：</label> <input type="text" id="input1"><br> <label for="input2">参数2：</label> <input type="text" id="input2"><br> <label for="input3">参数3：</label> <input type="text" id="input3"><br> <button id="confirmBtn">确认</button> </div> </div> <script> // 获取模态窗口和确认按钮 var modal = document.getElementById("myModal"); var btn = document.getElementById("openModalBtn"); var confirmBtn = document.getElementById("confirmBtn"); // 点击打开模态窗口按钮时，显示模态窗口 btn.onclick = function() { modal.style.display = "block"; } // 在确认按钮的点击事件中，调用处理函数并传递参数 confirmBtn.addEventListener("click", function() { // 获取需要传递的参数 var param1 = document.getElementById("input1").value; var param2 = document.getElementById("input2").value; var param3 = document.getElementById("input3").value; // 调用处理函数 processInput(param1, param2, param3); // 隐藏模态窗口 modal.style.display = "none"; }); // 处理函数，用来获取表单元素的值，并执行需要的操作 function processInput(param1, param2, param3) { // 执行需要的操作，例如输出参数 console.log("参数1：" + param1); console.log("参数2：" + param2); console.log("参数3：" + param3); } </script> <style> /* 模态窗口样式 */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位 */ z-index: 1; /* 显示在最上层 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 当内容超过窗口大小时，显示滚动条 */ background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */ } .modal-content { background-color: #fefefe; /* 白色背景 */ margin: 15% auto; /* 上下居中 */ padding: 20px; border: 1px solid #888; width: 40%; /* 宽度为40% */ } </style> </body> </html> ``` 您可以在本地运行该代码，查看模态窗口的效果，并在控制台中查看输出的参数值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

C_x_330

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值