CSS的margin塌陷（collapse）
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<metaname=""content="">
<style>
*{
margin:0px;
padding:0px;
}
#no1{
background:#808000;
width:300px;
height:300px;
margin:100px 0 0 100px;
}
#no2{
background:#c0c0c0;
width:150px;
height:150px;
margin-left:20px;
margin-top:30px;
}
</style>
</head>
<body>
<div id="no1">
<div id="no2">Span2</div>
</div>
</body>
</html>
如果您认为应该是这样的话：
那就错了。结果是这样的：
因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于
上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-
top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个
意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个
并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。w3s
chool也规定：当两个垂直外边距相遇时，它们将形成一个外边距。合并后
的外边距的高度等于两个发生合并的外边距的高度中的较大者。
但对于父块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;
CSS的margin塌陷（collapse）的更多相关文章
- 问题与对策：CSS的margin塌陷（collapse）
1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...
- 慎用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时,才会生效 ...
随机推荐
- 初学者-PHP笔记
PHP介绍 PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词 PHP 是一种被广泛使用的开源脚本语言 PHP 脚本在服务器上执行 PHP 没有成 ...
- CSS3动画快速实现
在工作或者平时做demo中,经常会遇到做一些简单的动画.初级前端同学可能就会有些棘手了. 在这里我发现了一个网上笔记实用且简单易上手的动画库.与大家共享一下: 更多请查看:http://anicoll ...
- nginx-(/usr/local/nginx/conf/nginx.conf)更改配置文件
user www www; worker_processes ; error_log /usr/local/nginx/logs/error.log info ; pid /var/run/nginx ...
- Android课程---关于Service的学习(后台运行)
MainActivity.java package com.hanqi.test2; import android.content.ComponentName; import android.cont ...
- Base64 转换 %2B 变 空格 解决
//此方法转换会转换出错 deString.ServerUrlDecode().Replace(" ", "+") //换此方法完美解决 HttpUtility ...
- Hbuilder开发HTML5 APP之侧滑菜单
1.思路: 其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如: //plus ...
- 业务安全通用解决方案——WAF数据风控
业务安全通用解决方案——WAF数据风控 作者:南浔@阿里云安全 “你们安全不要阻碍业务发展”.“这个安全策略降低用户体验,影响转化率”——这是甲方企业安全部门经常听到合作团队抱怨.但安全从业者加入公司 ...
- 使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- Windows环境安装Linux系统及JDK部署
前言 由于我的笔记本有点问题,所以这周系统包括所有硬盘全部重装了,原来的Linux虚拟机都没了,因此才有了这篇文章和各位朋友们分享. 由于Linux环境的优越性(开源.低成本.安全性好.网络功能强大) ...
- 每周一书-《鸟哥的Linux私房菜》获奖公布
<鸟哥的Linux私房菜>一书的赠书活动时间为2016年10月19日到10月31日, 也就是今天结束. 首先要感谢QQ号为:1084830483(路在远方),来自哈尔滨工程大学的同学赠送给 ...