问题与对策：CSS的margin塌陷（collapse）
1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
2: <html>
3: <head>
4: <title></title>
5: <metaname=""content="">
6: <style>
7: *{
8: margin:0px;
9: padding:0px;
10: }
11:
12: #no1{
13: background:#808000;
14: width:300px;
15: height:300px;
16: margin:100px 0 0 100px;
17: }
18:
19: #no2{
20: background:#c0c0c0;
21: width:150px;
22: height:150px;
23: margin-left:20px;
24: margin-top:30px;
25: }
26: </style>
27: </head>
28:
29: <body>
30:
31: <div id="no1">
32: <div id="no2">Span2</div>
33: </div>
34:
35: </body>
36:
37: </html>
如果您认为应该是这样的话：
那就错了。结果是这样的：
因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin- top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。w3school也规定：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。所以对于代码：
1: <div class="father"></div>
father这个div的高度为0，因为里面没有能够撑开div的内容。如果变为：
1: <div class="father">I am here.</div>
则高度就是文字的高度，因为此时文字在撑着这个DIV。
话说回来，一个DIV和它的子DIV特别重视垂直边框或填充，也就好像是，一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填充就是这个“锅盖”。于是解决的方式至少有以下三种：
1、需要给父div设置边框，当然可以设置边框为透明：
1: border:1px solid transparent
2: 或
3: border-top:1px solid transparent
2、为父DIV添加padding，或者至少添加padding-top;
1: padding:1px
2: 或
3: padding-top:1px; /*必须大于0*/
3、为父DIV添加overflow:hidden
1: over-flow:hidden;
来源：http://www.ido321.com/387.html
问题与对策：CSS的margin塌陷（collapse）的更多相关文章
- CSS的margin塌陷（collapse）
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...
- 慎用margin系列1---CSS的margin塌陷(collapse) 问题与对策
对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的 ...
- CSS的margin塌陷
一.两个div并列,上面div的margin-bottom和下面div的margin-top会塌陷,也就说会取上面div的margin-bottom和下面div的margin-top的最大值作为两个并 ...
- WEB学习-CSS中Margin塌陷
margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...
- CSS基础 margin塌陷问题以及解决 办法
场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...
- css margin塌陷问题
一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...
- 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- margin塌陷与margin合并（margin），清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
随机推荐
- 对象工具类 - ObjectUtils.java
对象工具类,提供对象克隆.获取对象属性.类型判断.Map转换对象.对象转Map.设置对象属性等. 源码如下:(点击下载 - ObjectUtils.java .JsonUtils.java .gso ...
- 5.3:从bean的实例中获取对象
5.3 从bean的实例中获取对象 在getBean方法中,getObjectForBeanInstance是个高频率使用的方法,无论是从缓存中获得bean还是根据不同的scope策略加载bean. ...
- 3.9 spring-自定义标签解析
到这里,我们已经完成了分析默认标签的解析与提取过程,或许设计的内容太多,我们忘了我们是冲哪个函数开始了的, 让我们再次回顾一下默认标签解析方法的起始方法. 入口如下: /** * Parse the ...
- Javascript中Array.prototype.map()详解
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数.callback 每次执行后的返回值组合起来形成一个新数组. callback 函数只会在有值的索引上被调用:那些从来没被赋 ...
- 使用Web代理实现Ajax跨域
目前的工作项目分为前端和后台,双方事先约定接口,之后独立开发.后台每天开发完后在测试服务器上部署,前端连接测试服务器进行数据交互.前端和后台分开的好处是代码不用混在一个工程里一起build,互不干涉. ...
- POJ 2275 Flipping Pancake
点我看题目 题意 : 按我自己的理解就是,给你n个数,按照从上到下排列,现在让你进行一系列的操作,让你将数按照从大到小排好. 思路 : 比赛的时候以为要用记录路径的搜索,当时没什么把握,所以没做,今天 ...
- spring 异常管理机制
三.异常处理的几种实现: 3.1.在经典的三层架构模型中,通常都是这样来进行异常处理的: A.持久层一般抛出的是RuntiomeException类型的异常,一般不处理,直接向上抛出. B.业务层一般 ...
- ENVI5.1安装破解教程
原文地址: ENVI5.1安装破解_百度经验 http://jingyan.baidu.com/article/020278118b5ded1bcd9ce57a.html ENVI5.1_x86 ...
- MVC 的HTTP请求
MVC 的HTTP请求过程(以IIS为例) 通过Browser发过请求给IIS(get/post) IIS得到请求后,再把请求转给aspnet_iisapi.dll处理,通过asp.net的一些框架的 ...
- Sqlmap基础（二）
sqlmap.py -r req1.txt --dbms Oracle --risk