collapse
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.解决方法
border:1px solid transparent或 border-top:1px solid transparent
2、为父DIV添加padding,或者至少添加padding-top;
collapse的更多相关文章
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- CSS的margin塌陷(collapse)
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- Bootstrap 折叠(Collapse)插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...
- Bootstrap源码分析之nav、collapse
导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...
- 明白何谓Margin Collapse
不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例 ...
- AngularJs的UI组件ui-Bootstrap分享(二)——Collapse
Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...
- CSS - toggle collapse 类似bootstrap的展开效果
问题:toggle collapse 类似bootstrap的展开效果(展开一个关闭另一个) Demo:http://jsfiddle.net/JSDavi/L47vscw4/ 方案:使用transi ...
- bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...
- 问题与对策:CSS的margin塌陷(collapse)
1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...
随机推荐
- ie11只能用管理员身份打开解决办法
解决IE11只能用管理员身份运行的问题 不知道大家有没有遇到这种情况,在毫不知情的情况下 IE11 突然打不开了,必须要用管理员身份运行才可以打开,而且重置浏览器这个方法也不奏效. 今天本人也遇到了, ...
- git的一些概念和技巧
1. 分支代表最后三个commit(即HEAD, HEAD^和HEAD~2),前一个commit,也用HEAD~1 2. 查看一个文件的改动历史git log (--pretty=oneline) - ...
- gridview添加header
gridview是不能添加header的,这里的解决方法是将listview改造成gridview使用,功能很好用,唯一的缺点是列数不能自适应 示例代码下载地址http://pan.baidu.com ...
- codevs 最佳落点(模拟)
/* 这题并没有A掉 自己电脑上运行ok提交就不对 预处理攻击范围 然后模拟 求大神看看有没有错误 Orz */ #include<iostream> #include<cstdio ...
- IOS改变状态栏样式
1.状态栏高亮颜色 在info.plist中添加 View controller-based status bar appearance 设置为 "NO"在AppDelegate. ...
- CSS 布局Float 【3】
float 属性定义元素在哪个方向浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可 ...
- 最全java的读写操作(转载)
Java的I/O系统中的输入输出流为我们进行开发提供了很多便利,利用其强大的封装性,通过各种组合能够实现多种多样的功能.但是Java提供了很多输入输出流类,在概念和使用上有很多相似之处,所以给很多开发 ...
- JavaScript--对象-检查一个对象是否是数组
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- C语言之头文件,static与const关键字
[前言] 最近几个月在做一个C语言代码重构的项目,过程中也让我对之前在书本上学习到的东西有些补充和巩固,在本博中总结记录下,梳理下零碎的知识点和经验也加深印象,书写是为了更好地思考.平时也都是用印象笔 ...
- weka打开提示内存不足的解决方法
今天在linux中打开Weka时,打开基因数据文件的时候出现如 Not enough memory . Please load a smaller dataset or use a larger he ...