margin collapse 之父子关系的DIV
2015-07-14 11:29
274 查看
打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了。。。
关于margin,整理若干知识点如下:
一:父子关系的DIV标签以及未加margin时的样式
然后我们给父级和子集都加上margin如下:
实际效果如下:
我们会发现,蓝色的div的marginTop并没有起作用,这个就是所谓的marginCollapse(边界重叠),只计算二者最大的margin值进行显示,之前写Css的时候也常遇见,却不知道还有这么高大上的名字。。。惭愧。
整理解决方案如下:
1.父div加一个border;
2.父div加一个overflow:hidden;
3.父div加padding;
4.父或子div加float;
5.父且子div加display:inline-block;
6.子div加display:inline-block;
如有遗漏,欢迎补充。
关于margin,整理若干知识点如下:
一:父子关系的DIV标签以及未加margin时的样式
然后我们给父级和子集都加上margin如下:
实际效果如下:
我们会发现,蓝色的div的marginTop并没有起作用,这个就是所谓的marginCollapse(边界重叠),只计算二者最大的margin值进行显示,之前写Css的时候也常遇见,却不知道还有这么高大上的名字。。。惭愧。
整理解决方案如下:
1.父div加一个border;
2.父div加一个overflow:hidden;
3.父div加padding;
4.父或子div加float;
5.父且子div加display:inline-block;
6.子div加display:inline-block;
如有遗漏,欢迎补充。
相关文章推荐
- 黑马程序员——Java常用对象
- httpclient-4.0.1应用指南
- hdu5282 最长公共子序列的变形
- Android百度公交开发(四)——百度地图API之根据经纬度查询地址信息
- 使用Android Studio遇到的问题及解决过程
- 杭电ACM 2033:人见人爱A+B
- C#读取Excel数据两种方式性能对比
- I love fifa 15 ps3 coins games very much,
- 课堂随笔第一节数据类型
- Android百度公交开发(三)——百度地图API之MyLocationOverlay的使用
- vs2010下C++调用lib或dll文件
- JDBC、mysql、jsp分页
- NSCalendar 日历
- [转]回发或回调参数无效的解决方法
- asp.net(c#)上传文件时检测文类型方法小结
- C# 知识回顾 - 你真的懂异常(Exception)吗?
- Introduction to Guid ( globally unique identifier )
- MyEclipse新手配置集合
- 转载并学习 C语言 sizeof函数详解
- 使用URL传输SESSION信息