div里面的margin-top失效
div标签中的元素margin-top失效的解决方法
问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提示，对该元素的父元素属性设置成
overflow:hidden;
在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="width:300px; height:100px">上部层</div>
<div style=" width:300px; height:300px;overflow:hidden "> <!--父层-->
<div style="margin:50px; width:200px; height:200px"">子层</div>
</div>
</body>
</html>
原因：盒子没有获得 haslayout 造成 margin-top无效
解决办法：
1、在父层div加上：overflow:hidden；
2、把margin-top外边距改成padding-top内边距 ；
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层div加： padding-top: 1px;
4、让父元素生成一个 block formating context，以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层div加：position: absolute;
div里面的margin-top失效的更多相关文章
- 如何让一个div里面的div垂直居中？
如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...
- jq slideDown后里面的A链接失效（已解决）
jq slideDown后里面的A链接失效(解决) 用jq 的 slideDown写了一个二级下拉菜单,但是里面的a标签全部失效了,挂的链接右键菜单可以正常打开,但是左键正常点击不行 查阅了很多资料, ...
- 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...
- div里面的id与for
<input class="select" type="checkbox" value="1" id="checkboxjc ...
- ajax局部刷新后里面的jquery事件失效的解决方法
live() 与bind()作用基本一样. 最重要区别:live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当你用js动态生成一个节点并插入到dom文档结构中时,如果你 ...
- 通过jQuery遍历div里面的checkbox
遍历: $('#queryUser2 input[type="checkbox"]:checked').each( function () { a = a + $(this).va ...
- css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明
css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...
- 后台找到repeater里面的div并添加客户端点击事件
public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...
- 5.用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div HTML: <select name="" onchange="select(this)&q ...
随机推荐
- C - 娜娜梦游仙境系列——吃不完的糖果
C - 娜娜梦游仙境系列——吃不完的糖果 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Oth ...
- ural 1353. Milliard Vasya's Function（背包/递归深搜）
1353. Milliard Vasya's Function Time limit: 1.0 second Memory limit: 64 MB Vasya is the beginning ma ...
- 17．从键盘上输入一个正整数n，请按照以下五行杨辉三角形的显示方式， 输出杨辉三角形的前n行。请采用循环控制语句来实现。 （三角形腰上的数为1，其他位置的数为其上一行相邻两个数之和。） 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1
17．从键盘上输入一个正整数n,请按照以下五行杨辉三角形的显示方式, 输出杨辉三角形的前n行.请采用循环控制语句来实现. (三角形腰上的数为1,其他位置的数为其上一行相邻两个数之和.) 1 1 1 1 ...
- Laravel框架开发规范-修订前期版
1.追加App/Models目录,App/User.php迁移至App/Models目录中 ①配置内容属于架构信息.服务器信息.有必要隐藏无法提交git的信息,请使用.env文件配合env()方法进行 ...
- PHP下利用PHPMailer配合QQ邮箱下的域名邮箱发送邮件
作 为PHP入门开发者,常常有这种述求:自己的网站中需要添加一个使用自己的域名作为发件人邮件地址的自动发送邮件的方法,用于诸如给用户发送验证码.通知 信息等.比如:我的某个用户注册模块,需要使用reg ...
- NodeJS 学习笔记一
他创造NodeJS的目的是为了实现高性能Web服务器,他首先看重的是事件机制和异步IO模型的优越性,而不是JS.但是他需要选择一种编程语言实现他的想法,这种编程语言不能自带IO功能,并且需要能良好支持 ...
- C/C++宏定义中#与##区别 .
// #表示:对应变量字符串化// ##表示:把宏参数名与宏定义代码序列中的标识符连接在一起,形成一个新的标识符 #define U_BOOT_CMD_MKENT_COMPLETE(name,maxa ...
- HDU 4289 Control
最小割 一个点拆成两个 AddEdge(i,i+N,x); 原图中的每条边这样连 AddEdge(u+N,v,INF); AddEdge(v+N,u,INF); S是源点,t+N是汇点.最大流就是答案 ...
- C语言介绍
以下东东转自百度百科 C语言是一种计算机程序设计语言,它既具有高级语言的特点,又具有汇编语言的特点.它由美国贝尔实验室的Dennis M. Ritchie于1972年推出,1978年后,C语言已先后被 ...
- Bootstrap 3 与 Foundation 5
开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一 ...