1. border-collapse

  • 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框
  • separate 缺省值。边框分开,不合并。
  • collapse 边框合并。即如果相邻,则共用同一个边框。

2. margin collapse

  • margin collapse,即边界塌陷或者说边界重叠。对于上下两个并列的div块而言,上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值,所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。
  • 对于父块DIV内含子块DIV的情况,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。

eg:

#fatherDiv{

  background:#808000;

  width:300px;

  height:300px;

  margin:100px 0 0 100px;

}

#childDiv{

  background:#c0c0c0;

  width:150px;

  height:150px;

  margin-left:20px;

  margin-top:30px;   //此处虽然设定了margin-top但是子div还是和父div的顶部重合

}

3.解决方法

1、给父DIV设置边框,当然可以设置边框为透明;

  border:1px solid transparent或 border-top:1px solid transparent

2、为父DIV添加padding,或者至少添加padding-top;

collapse的更多相关文章

  1. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  2. CSS的margin塌陷(collapse)

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  3. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  4. Bootstrap 折叠(Collapse)插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...

  5. Bootstrap源码分析之nav、collapse

    导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...

  6. 明白何谓Margin Collapse

    不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例 ...

  7. AngularJs的UI组件ui-Bootstrap分享(二)——Collapse

    Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...

  8. CSS - toggle collapse 类似bootstrap的展开效果

    问题:toggle collapse 类似bootstrap的展开效果(展开一个关闭另一个) Demo:http://jsfiddle.net/JSDavi/L47vscw4/ 方案:使用transi ...

  9. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  10. 问题与对策:CSS的margin塌陷(collapse)

    1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...

随机推荐

  1. zoj 2112 Dynamic Rankings(主席树&amp;动态第k大)

    Dynamic Rankings Time Limit: 10 Seconds      Memory Limit: 32768 KB The Company Dynamic Rankings has ...

  2. MyBatis报错

    1.错误描写叙述 2014-11-2 15:03:11 org.apache.catalina.core.StandardEngine start 信息: Starting Servlet Engin ...

  3. [转] C++指针加整数、两个指针相减的问题

    http://blog.csdn.net/onlyou930/article/details/6725051 说来惭愧,写C++有一段时间了.这个问题从来没有认真考虑过,此次标记于此: 考虑如下问题: ...

  4. Java基础知识强化之IO流笔记18:FileOutputStream写入数据

    1. 创建字节输出流对象,做了几件事情: (1)调用系统功能去创建文件(2)创建fos对象(3)把fos对象指向这个文件 2. 代码示例: package com.himi.fileoutputstr ...

  5. zabbix图中出现中文乱码问题

    我这周部署了zabbix监控服务器,但是配置过程中发现当有中文时,图中的中文会变成方块 如下图所示: 这个问题是由于zabbix的web端没有中文字库,我们最需要把中文字库加上即可 解决办法如下 1. ...

  6. 【转】iOS中流(Stream)的使用

    转自:http://southpeak.github.io/blog/2014/07/17/ioszhong-liu-stream-de-shi-yong/流提供了一种简单的方式在不同和介质中交换数据 ...

  7. Sql语句 不支持中文 国外数据库

    由于老美的不支持中文 SQL 语句第一:字段类型改为nvarchar,ntext 第二:强制转化 N update dbo.Role set rolename=N'普通用户' update dbo.T ...

  8. IIS支持下载.config后缀名的文件

    这里用.config举例,其他类型文件同理. 设置MIME点击右侧添加,文件扩展名填写.config,MIME类型填写application/octet-stream.或者添加.*,将所有未列出的文件 ...

  9. html table 知识点

    第一点就是图片在表格中不能对齐边沿的问题,这是和浏览器的渲染模式相关的,在标准模式中是不能对齐的,除非改变CSS某些样式.而在准标准模式和怪异模式中,默认就是对齐的. 这一特性在以前的表格布局时代是大 ...

  10. 【转】iOS6中的Auto Layout:通过代码添加约束

        最近做的项目用到了Auto Layout,于是经过了一番大量的google,这是我看到的讲用代码创建约束最清晰的一篇教程,于是想跟更多的人分享一下.原文也比较简单,可以直接过去看,如果我翻译的 ...