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. ie11只能用管理员身份打开解决办法

    解决IE11只能用管理员身份运行的问题 不知道大家有没有遇到这种情况,在毫不知情的情况下 IE11 突然打不开了,必须要用管理员身份运行才可以打开,而且重置浏览器这个方法也不奏效. 今天本人也遇到了, ...

  2. git的一些概念和技巧

    1. 分支代表最后三个commit(即HEAD, HEAD^和HEAD~2),前一个commit,也用HEAD~1 2. 查看一个文件的改动历史git log (--pretty=oneline) - ...

  3. gridview添加header

    gridview是不能添加header的,这里的解决方法是将listview改造成gridview使用,功能很好用,唯一的缺点是列数不能自适应 示例代码下载地址http://pan.baidu.com ...

  4. codevs 最佳落点(模拟)

    /* 这题并没有A掉 自己电脑上运行ok提交就不对 预处理攻击范围 然后模拟 求大神看看有没有错误 Orz */ #include<iostream> #include<cstdio ...

  5. IOS改变状态栏样式

    1.状态栏高亮颜色 在info.plist中添加 View controller-based status bar appearance 设置为 "NO"在AppDelegate. ...

  6. CSS 布局Float 【3】

    float 属性定义元素在哪个方向浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可 ...

  7. 最全java的读写操作(转载)

    Java的I/O系统中的输入输出流为我们进行开发提供了很多便利,利用其强大的封装性,通过各种组合能够实现多种多样的功能.但是Java提供了很多输入输出流类,在概念和使用上有很多相似之处,所以给很多开发 ...

  8. JavaScript--对象-检查一个对象是否是数组

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. C语言之头文件,static与const关键字

    [前言] 最近几个月在做一个C语言代码重构的项目,过程中也让我对之前在书本上学习到的东西有些补充和巩固,在本博中总结记录下,梳理下零碎的知识点和经验也加深印象,书写是为了更好地思考.平时也都是用印象笔 ...

  10. weka打开提示内存不足的解决方法

    今天在linux中打开Weka时,打开基因数据文件的时候出现如 Not enough memory . Please load a smaller dataset or use a larger he ...