06 CSS-margin
来源:互联网 发布:mac版qq飞车 编辑:程序博客网 时间:2024/06/08 10:30
1、margin的塌陷现象
标准文档流中,竖直方向的margin不叠加,以较大的为准
如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的:
2、盒子居中margin:0 auto;
margin的值可以为auto,表示自动。
当left、right两个方向,都是auto的时候,盒子居中了:
margin:0 auto; → 让这个div自己在大容器中居中。text-align: center; → 让这个div内部的文本居中。
注意:
1) 使用margin:0 auto; 的盒子,必须有width,有明确的width
2) 只有标准流的盒子,才能使用margin:0 auto; 居中。
也就是说,当一个盒子设置了浮动、绝对定位、固定定位,都不能使用margin:0 auto;
3) margin:0 auto;是在居中盒子,不是居中文本。
文本的居中,要使用1text-align:center;
3、善于使用父亲的padding,而不是儿子的margin
如果父亲没有border,那么儿子的margin实际上踹的是“流”,所以父亲也掉下来了。
//这个p有一个margin-top踹父亲,试图将自己下移<div> <p></p></div>
结果:
margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。
4、关于margin的IE6兼容问题
4.1、 IE6双倍margin bug
当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。
<ul> <li></li> <li></li> <li></li></ul>
解决方案:
1)使浮动的方向和margin的方向,相反。
最好习惯是浮动的方向和margin的方向相反。
float: left; margin-right: 40px;
2)使用hack(没必要,别惯着这个IE6)
单独给队首的元素,写一个一半的margin
4.2、 IE6的3px bug
解决办法:
不用管,因为根本就不允许用儿子踹父亲。所以,如果你出现了3px bug,说明你的代码不标准。
阅读全文
0 0
- 06 CSS-margin
- 06 CSS-margin
- css margin
- CSS--Margin
- [CSS]CSS属性 margin
- CSS的Margin用法
- CSS margin的含义
- css中margin省略
- [CSS]---margin-left例子
- CSS margin 属性
- CSS:margin属性备忘
- CSS: margin,padding详解
- CSS margin研究
- css padding margin初始化
- css margin知识 全集
- CSS 外边距 margin
- CSS Border & Padding & Margin
- margin-padding-css
- tail,more查看日志(定点和翻页)
- 《Flask Web开发》学习笔记之bug--(5)【jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'endlock'】
- 实体类注解生成数据库表
- sql连接查询
- 枚举进程线程
- 06 CSS-margin
- python-tesseract下载安装及使用
- hdu 2642 star(二维树状数组)
- Criteria用法
- ASP.NET DataList添加删除按钮
- hibernate注解方式(类级别和属性级别)
- 输入16进制的数字输出10进制
- 07 CSS-相对定位、绝对定位、固定定位、z-index
- Spring Mvc 公共Controller 使用拦截器注入请求信息