margin 属性对嵌套div定位的总结

最新推荐文章于 2022-06-01 08:23:21 发布
最新推荐文章于 2022-06-01 08:23:21 发布
阅读量956 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630877/article/details/81536482
版权

如果div设置了margin-top属性，他会对嵌套div的margin-top属性有影响，默认执行margin-top属性值最大并会影响最外层margin-top的定位；

 

 

一号箭头，margin-top属性值设置为了0px 三号箭头的margin-top属性值设置了200px 正常情况下外层橘黄色背景会钉在浏览器的头部，然而实现的效果去不是这样，确实向下移了20px，说明受到了内层margin-top的影响。

 

温文尔雅小禽兽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
嵌套div里子元素div使用margin可能遇到的问题
r67686的博客
09-16 568
在使用嵌套div时，如果子元素设置了margin的属性，有时会使父元素一起移动，例如 可以看到两个div一起向下移动了，并没有达到子div在父div里面向下移动 50px的效果，要解决这种情况，可以给父元素增加一个边框的属性 比如 可以看到效果出来了 还可以给父元素的样式代码里设置一个overflow:hidden，一样可以解决这个问题 也可以给父元素设置一个有效的padding （这里的有效指的是要给一个padding值，不能设置为none和hidde...
div样式之margin
weixin_45637488的博客
04-03 2141
<!-- 外边距(margin):盒子之间的距离--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
前端嵌套div的margin不起作用怎么解决
yunduanaoligei的博客
10-09 577
今天分享下”前端嵌套div的margin不起作用怎么解决“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 顺便科普下margin的定义和用法。 div嵌套的HTML代码： ​​​​ ​​<​​​​html​​ ​​lang​​​​=​​​​"en"​​​​>​​ ​​<​​​​head​​​​>​​ ​​<​​​​meta​​ ​​charset​​​​=​​​​"UTF-8"​​​​&
html div居中属性,让div水平居中设置margin属性
weixin_39968724的博客
06-04 827
css怎样让div水准居中呢？div居中前提是甚么？怎样才让div居中呢？要让div程度居中设置装备摆设margin属性即可。1、居中枢纽CSS代码：margin:0 automargin:0 auto为何能让div 居中批注：margin:0 auto拆分为margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;枢纽marg...
嵌套div（块级元素）的静态定位
alucardxpmusic的专栏
10-11 757
div1      div2      div3      div4
DIV多层嵌套margin-top的BUG问题
09-25
本文主要探讨一个常见的前端开发问题，即“DIV多层嵌套margin-top的BUG问题”。在某些浏览器，特别是Firefox和Internet Explorer的不同版本中，这个问题可能导致预期的样式效果出现偏差。 问题起源于浏览器对于CSS...
HTML中div嵌套div的margin不起作用的解决方法
11-19
下面介绍一下div嵌套div时margin不起作用的解决方案。 顺便科普下margin的定义和用法。 div嵌套的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
div style常用属性介绍及使用示例
01-19
一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： 复制代码代码如下: <div xss=removed> </div> 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 复制代码代码如下: <div...
子级div设置margin影响父级.html
09-24
前端开发中，有时候会遇到设置子级div的margin属性后，导致整个父级div整体移动，有时候却是正常的，时而正常时而异常。
CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐，左上角，左下角，右下角，右上角对齐方式的实现
飙歌的博客
10-24 1万+
margin的值类型有：auto | length | percentage percentage：百分比是由被应用box的containing block margin的默认值为0，并且margin支持负值。 margin可以用来同时指定box的四边外边距。如果属性margin有四个值，那么值将按照上-右-下-左的顺序作用于四边，按顺时针的顺序围绕元素。 表达式如下： margin：top right bottom left； 四个数值中间以空格分隔。效果等同于： margin...
利用margin属性将一个div水平居中
09-25
将一个div水平居中的方法有很多，不过在使用过程中margin的频率还是比较高的，下面有个不错的示例，不知道的朋友可以参考下
Div多层嵌套margin-top的bug问题及解决方案
dream_start_at_2017的博客
10-18 606
bug: 如果父元素和第一个子元素没有float的情况下，给第一个子元素添加margin-top属性会错误的传递给父元素，出现父元素与子元素一起向下移动的问题。 eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top-bug问题及解决方案</title> <style> *{ margi
写前端时margin常遇到的嵌套崩塌问题
m0_52242001的博客
06-01 261
本文提供了margin遇到的问题（父元素随这子元素向下移动的问题）和两种解决办法帮助需要的人们，大家一起交流学习。
css 父子嵌套关系margin合并问题解决方案
Rance_King的博客
09-19 1000
在css中，父子嵌套的元素会发生子元素margin失效的问题。比如： <style> .parent{ width: 100px; height: 100px; background-color: red; margin-top: 100px; } ...
子div的margin属性影响到父div的定位
readonlyfile
10-26 1498
如下形式： .wrap{ margin: 0 auto ; background:#ccc ; } .child{ margin-top : 20px ; } 该div将影响父层div的margin属性 最后的结果是，child div 会使得 wrap div margin-top 20 px。 网上搜了下，解决办法是：在wrap中添加ove
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 3536
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
5分钟深入了解margin属性
热门推荐
qq_44158936的博客
03-21 2万+
1、定义与用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 **说明：**这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。 **注释：**允许使用负值。 2、属...
div 相对位置和绝对位置
每天进步一点点
02-16 2755
无标题文档 多谈谈你的看法，或许会让更多人关注你
margin设置div与div间距
lzf的博客
04-11 1万+
margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。 其实说白了padding就是内容与边框的空隙.而margin 则是模块与模块的空隙.下面图解: margin 与 padding 得盒子模型图解
div嵌套div布局实例
最新发布
06-08
好的，这是一个简单的 div 嵌套 div 的布局示例： HTML代码： ```html <div class="container"> <div class="header"> 这是标题 </div> <div class="content"> <div class="sidebar"> 侧边栏 <li><a href...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值