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








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;
}
这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了,为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)的更多相关文章
- 高级设置电脑系统windows7防火墙出错代码0×6D9原因与解决技巧
高级设置windows防火墙能够更好的保护电脑系统安全,在电脑系统windows7设置过程中难免会遇到某些问题,有用户在安装MRGT后想要打开SNMP的161端口,但在打开高级安全windows防火墙 ...
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- 子元素设置margin-top后,父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- position:fix相对父元素定位
大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏d ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- 子DIV设置margin-top影响父DIV位置的解决办法
父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- 子div设置margin-top使得父div也跟着向下移动
之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:1 ...
- Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!
最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...
随机推荐
- jquery中ajax的dataType的各种属性含义
参考ajax api文档:http://www.w3school.com.cn/jquery/ajax_ajax.asp dateType后接受的参数参数类型:string 预期服务器返回的数据类型. ...
- innodb_locks_unsafe_for_binlog分析
mysql数据库中默认的隔离级别为repeat-read. innodb默认使用了next-gap算法,这种算法结合了index-row锁和gap锁.正因为这样的锁算法,innodb在可重复读这样的默 ...
- pt-heartbeat --update --daemonize 只执行一次秒退的问题
使用pt-heartbeat帮助测试MySQL从库delay时长- 第一次运行测试成功,运行顺畅. 过几天再次用--update测试时,发现pt-heartbeat只update一次就自己退出了,-- ...
- Python通过LDAP验证、查找用户(class,logging)
定义一个类,用于初始化ldap连接,验证.查找用户等功能 # -*- coding: UTF-8 -*- import sys reload(sys) sys.setdefaultencoding(' ...
- python的学习之路day5
大纲: 1.双层装饰器 单层装饰器 双层装饰器 原理 2.字符串的格式化 3.format字符串格式化 4.生成器 5.递归 6.模块的安装 7.json模块 8.pickle模块 9.time模块 ...
- 解决Maven下载慢的问题
直接在pom.xml中添加阿里的镜像 <repositories> <repository> <id>aliyun</id> <name>a ...
- 2018.08.31 16:26 调试 Swift 和 Pycharm 与 github 之间的链接
花了一段时间调试Swift和Pycharm的链接,网上查了一下有关信息,再加上自己的摸索,一会就掌握了.
- QT学习笔记8:QDir类及其用法总结
简介 QDir类提供了访问系统目录结构及其内容的与平台无关的方式. 头文件:#include <qdir.h> QDir类用来操作路径名及底层文件系统,获取关于目录路径及文件的相关信息,也 ...
- 如何使用seajs+jQuery构建中型项目
为何有这种想法? 由于最近做的项目是用jquery+seajs集成的,所以就突发奇想 如何使用seajs+jquery能更好的构建项目,比如能解决模块化,模块与模块之间的依赖,文件上线后打包,压缩等能 ...
- P1272 重建道路
题目描述 一场可怕的地震后,人们用N个牲口棚(1≤N≤150,编号1..N)重建了农夫John的牧场.由于人们没有时间建设多余的道路,所以现在从一个牲口棚到另一个牲口棚的道路是惟一的.因此,牧场运输系 ...