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 ...
随机推荐
- sublime 3 最新 LICENSE
http://blog.sina.com.cn/s/blog_68e267e10102v76h.html
- 怎样正确设置remote_addr和x_forwarded_for
怎样正确设置remote_addr和x_forwarded_for 2013-04-20 做网站时经常会用到remote_addr和x_forwarded_for这两个头信息来获取客户端的IP,然而当 ...
- 【Machine Learning in Action --4】朴素贝叶斯过滤网站的恶意留言
背景:以在线社区的留言板为例,为了不影响社区的发展,我们需要屏蔽侮辱性的言论,所以要构建一个快速过滤器,如果某条留言使用了负面或者侮辱性的语言,那么就将该留言标识为内容不当.过滤这类内容是一个很常见的 ...
- ural 1013. K-based Numbers. Version 3（动态规划）
1013. K-based Numbers. Version 3 Let’s consider K-based numbers, containing exactly N digits. We def ...
- 移动端touch触屏滑动事件、滑动触屏事件监听！
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- CSS居中方法
css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...
- ThinkPad 禁用 触摸板
执行 xinput wowk@wowk:~$ xinput ⎡ Virtual core pointer id=2 [master pointer (3)] ⎜ ↳ Virtual core XTES ...
- VBS基础篇 - 杂项 - Sendkeys
VBS基础篇 - 杂项 - Sendkeys 模拟键盘操作,将一个或多个按键指令发送到指定Windows窗口来控制应用程序运行 其使用格式为:object.SendKeys(string) obj ...
- MFC实现登录对话框连接access数据库方式
编写一个简单的登录对话框 大家好,我们利用MFC编写一个简单的登录对话框.主窗体是单文档界面.程序运行的时候,先弹出一个简单的登录对话框,输入用户名和密码后主窗体显示出来. 1.开打VC++6.0.点 ...
- hdu_3518_Boring counting(后缀数组)
题目链接:hdu_3518_Boring counting 题意: 给你一个字符串,让你找不重叠且出现大于1次以上的字串个数 题解: 后缀数组height数组的应用,我们枚举字串的长度,然后将heig ...