关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用line-height=高度,无法居中,发现源码.navbar-brand 设置了 padding: 15px 15px;(默认导航高度为50),于是居中应该是等于高度-30,解决过程中写了几个div用于检测问题,结果遇到了以下问题,经过数小时的研究(时间大多花费在百度与谷歌上,以及研究原因上),于是写下这篇文章做个总结,加深个人记忆。
 
我写了两个div,从上往下分别标记为div1和div2,设置了相同的margin与高宽,然后给div1设置左浮动。那么根据我薄弱的基础判断,这时候刷新页面应该出现的是两个div重叠在一起,只显示一个div,但是结果出现了偏差,两个div并没有叠加显示,并且div1出现在了div2下方。
(F5后的显示)
预期的结果并没有出现,然后开始排查写的代码,发现问题出现在margin上,清除div的maring后元素显示正常,不会出现错位。
(清除了margin之后的正常状态)
由于margin-left是正常的,所以显然是margin-top的设置出现了些问题,于是推理查找问题,n分钟后得出如下结论
正常文档流状态下,div1浮动,脱离了文档流,然后div2这时候依旧处在文档流状态,于是向上移动至div1浮动前的位置,这时候body的位置发生改变,向下移动了div2设置的margin-top的距离,(又一个问题出现了,为什么div2设置的margin能够改变body的位置,或者说是父元素的位置!好吧,这个问题经过百度与测试后发现是个固有问题,在文章末尾做详细说明)。
(蓝色部分是body)
而div1这时候处于浮动状态,由于同样设置了margin,所以浮动后同样会改变位置,div1浮动后根据body的位置重新进行定位,所以div1浮动后,两个div的位置不会重合。(解决方法-给body添加padding-top,或者border——详情见结尾。)
(可以很明显看出div2根据body进行了margin定位)
 
 
两个div的css如下:
 div:nth-child(1){
float: left;
margin: 50px;
width: 200px;
height: 200px;
border: 10px solid #000;
}
div:nth-child(2){
margin:50px;
width: 200px;
height: 200px;
border: 10px solid #000;
}
 
 
关于子元素的margin-top会改变父级元素的位置,(也就是div2的margin-top改变了body位置),以下。
 
这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
 
再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了,为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
 

关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)的更多相关文章

  1. 高级设置电脑系统windows7防火墙出错代码0×6D9原因与解决技巧

    高级设置windows防火墙能够更好的保护电脑系统安全,在电脑系统windows7设置过程中难免会遇到某些问题,有用户在安装MRGT后想要打开SNMP的161端口,但在打开高级安全windows防火墙 ...

  2. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  3. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. position:fix相对父元素定位

    大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...

  5. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  6. 子DIV设置margin-top影响父DIV位置的解决办法

    父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...

  7. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  8. 子div设置margin-top使得父div也跟着向下移动

    之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:1 ...

  9. Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!

    最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...

随机推荐

  1. jquery中ajax的dataType的各种属性含义

    参考ajax api文档:http://www.w3school.com.cn/jquery/ajax_ajax.asp dateType后接受的参数参数类型:string 预期服务器返回的数据类型. ...

  2. innodb_locks_unsafe_for_binlog分析

    mysql数据库中默认的隔离级别为repeat-read. innodb默认使用了next-gap算法,这种算法结合了index-row锁和gap锁.正因为这样的锁算法,innodb在可重复读这样的默 ...

  3. pt-heartbeat --update --daemonize 只执行一次秒退的问题

    使用pt-heartbeat帮助测试MySQL从库delay时长- 第一次运行测试成功,运行顺畅. 过几天再次用--update测试时,发现pt-heartbeat只update一次就自己退出了,-- ...

  4. Python通过LDAP验证、查找用户(class,logging)

    定义一个类,用于初始化ldap连接,验证.查找用户等功能 # -*- coding: UTF-8 -*- import sys reload(sys) sys.setdefaultencoding(' ...

  5. python的学习之路day5

    大纲: 1.双层装饰器 单层装饰器 双层装饰器 原理 2.字符串的格式化 3.format字符串格式化 4.生成器 5.递归 6.模块的安装 7.json模块 8.pickle模块 9.time模块 ...

  6. 解决Maven下载慢的问题

    直接在pom.xml中添加阿里的镜像 <repositories> <repository> <id>aliyun</id> <name>a ...

  7. 2018.08.31 16:26 调试 Swift 和 Pycharm 与 github 之间的链接

    花了一段时间调试Swift和Pycharm的链接,网上查了一下有关信息,再加上自己的摸索,一会就掌握了.

  8. QT学习笔记8:QDir类及其用法总结

    简介 QDir类提供了访问系统目录结构及其内容的与平台无关的方式. 头文件:#include <qdir.h> QDir类用来操作路径名及底层文件系统,获取关于目录路径及文件的相关信息,也 ...

  9. 如何使用seajs+jQuery构建中型项目

    为何有这种想法? 由于最近做的项目是用jquery+seajs集成的,所以就突发奇想 如何使用seajs+jquery能更好的构建项目,比如能解决模块化,模块与模块之间的依赖,文件上线后打包,压缩等能 ...

  10. P1272 重建道路

    题目描述 一场可怕的地震后,人们用N个牲口棚(1≤N≤150,编号1..N)重建了农夫John的牧场.由于人们没有时间建设多余的道路,所以现在从一个牲口棚到另一个牲口棚的道路是惟一的.因此,牧场运输系 ...