margin塌陷现象(即在内层设置margin-top无效的解决办法)
有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象。
解决办法:
1.在父元素div上加上:overflow:hidden;
2.把margin-top外边距改成padding-top内边距;
3.父元素div产生边距重叠的边有不为0的padding或宽度不为0且style不为none的border;父元素添加padding-top:1px;
4.让父元素生成一个 block formating context,以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层div加:position: absolute;
margin塌陷现象(即在内层设置margin-top无效的解决办法)的更多相关文章
- wordpress设置固定链接无效的解决办法
声明:本人用的是Ubuntu 10.04 LAMP服务 以下内容是针对在Apache服务器下Wordpress修改固定链接出错无效的解决办法: 如果改了固定链接以后出问题,请查看Wordpress根目 ...
- 设置overflow:auto无效的解决办法
做项目中经常要用到滚动条,有时候给div设置overflow无效. 遇到这样的问题,只需要在 F12 Elements面板检查一下要设置overflow的元素的宽高是否大于父级元素宽高. (overf ...
- centos设置中文输入法无效的解决办法
安装 im-chooser: yum install im-chooser 回到当前使用的普通用户,设置 ibus 输入法为默认输入系统: imsettings-switch ibus
- xadmin下设置“use_bootswatch = True”无效的解决办法
环境: python 2.7 django 1.9 xadmin采用源代码的方式引入到项目中 问题: 在xadmin使用的过程中,设置“use_bootswatch = True”,企图调出主题菜单, ...
- C# 反射 设置字段值无效的解决办法
FieldInfo.SetValue的原型是:void SetValue(object obj, object value)当你传递一个值类型(结构是值类型)的时候,它要转化成object,也就是要装 ...
- Web.Debug.config和Web.Release.config设置xdt:Transform无效的解决办法
在VS中右键网站>发布时xdt:Transform 生效.但是使用tfs的build时,build可以正常通过,但是web.release.config中的xdt:Transform 无效,其它 ...
- Idea内存设置idea.vmoptions无效的解决办法
原因:貌似是因为maven的问题 解决办法 结果
- margin塌陷现象
如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...
- HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
随机推荐
- 【MS SQL】把多个数据库合并为一个新的数据库
原文:[MS SQL]把多个数据库合并为一个新的数据库 因应工作要求,需要把两个数据库合并成一个库: 一开始使用"导入数据.导出数据和复制数据库"三个工具时,没有达到要的效果. 后 ...
- WITH (NOLOCK)浅析
SQL Server 中WITH (NOLOCK)浅析 2014-08-30 11:58 by 潇湘隐者, 503 阅读, 2 评论, 收藏, 编辑 概念介绍 开发人员喜欢在SQL脚本中使用WITH( ...
- AJAX 表单提交 文件上传
1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...
- 封装两个简单的Jquery组件
Jquery给我们提供了很大的方便,我们把他看成是一个公共库,以致在这个公共库上延伸出了很多Jquery插件:在项目过程中,有些插件总是不那么令人满意: 主要说两个项目用途: 1. 遮罩层,跟一般的 ...
- Fitnesse测试用例脚本自动生成设计
Fitnesse是通过wiki形式来展示.管理和执行测试用例,若要在Fitnesse上设计测试用例,前提是必须熟悉一定的wiki语法,虽然wiki语法简单,但是若要设计成百上千的测试用例还是有很大的工 ...
- 浅谈DevExpress<五>:TreeList简单的美化——自定义单元格,加注释以及行序号
今天就以昨天的列表为例,实现以下效果:预算大于110万的单元格突出显示,加上行序号以及注释,如下图:
- Knockout 是什么?
翻译:Knockout 轻松上手 - 1 Knockout 是什么? 原文名称:KnockoutJS Starter Knockout 是一个非常棒的脚本库,可是我发现许多人并不了解它,所以,思胜翻译 ...
- generating permunation
generating permunation——全排列(算法汇总) #include <iostream> #include <string> #include <vec ...
- jQuery 2.0.3 源码分析Sizzle引擎解析原理
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...