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: & ...
随机推荐
- Maven常用插件--转
=========Maven Report Plugin========= 1.源码分析 <artifactId>maven-pmd-plugin</artifactId> 2 ...
- C/C++ Linux 程序员必须了解的 10 个工具
1. 基本命令http://mally.stanford.edu/~sr/computing/basic-unix.htmlhttp://pangea.stanford.edu/computing/u ...
- C#_事件委托
CarDealer类 事件发布程序 using System; using System.Collections.Generic; using System.Linq; using System.Te ...
- 对SQL Server SQL语句进行优化的10个原则
1.使用索引来更快地遍历表. 缺省情况下建立的索引是非群集索引,但有时它并不是最佳的.在非群集索引下,数据在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说:①.有大 ...
- UITextView textViewShouldEndEditing
最近做到UITextView, 在取消键盘事件上我以为和UITextField差不多,于是我这样写: UITextView *textView = [[UITextView alloc] initWi ...
- 【转】那些好用的iOS开发工具
原文:http://www.devtang.com/blog/2014/06/29/ios-dev-tools/ 前言 从苹果发明iPhone起,AppStore上的一个又一个类似flappy bir ...
- ios 中的UI控件学习总结(1)
UIKit框架提供了非常多功能强大又易用的UI控件 下面列举一些在开发中可能用得上的UI控件 UIButton 按钮 UILabel 文本标签 UITextField 文本输入框 UIImageVie ...
- app发布流程详解
https://developer.apple.com 1. 点击 Member Center 2. 创建应用ID 3. 创建项目 4. 在AppStore创建对应的应用 5. 创建授权文件 6. 配 ...
- C# 深入浅出 委托与事件
C#中的委托和事件的概念接触很久了,但是一直以来总没有特别透彻的感觉,现在我在这里总结一下: 首先我们要知道委托的由来,为什么要使用委托了? 我们先看一个例子: 假设我们有这样一个需求,需要计算在不同 ...
- 跟我学android-常用控件之 TextView
TextView 是Android文本控件,用于显示文字. 我们先看一看TextView的结构(developer.android.com) 从这里我们可以得知,TextView是View的子类,他有 ...