深入CSS属性(六):margin
来源:互联网 发布:gzip压缩linux 编辑:程序博客网 时间:2024/05/22 00:57
一、属性介绍
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
可取值:
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比计算的外边距。
inherit 规定应该从父元素继承外边距。
二、常见问题
1.IE6下浮动元素双倍边距问题
解决方法:
IE6中设置block元素display:inline;
.l{margin-left:20px;float:left;display:inline;}
原因:首先,inline元素和inline-block元素是没有双倍边距的。对inline元素设置float后,会有个haslayout,使inline元素具有inline-block元素的特性,进而可以设置垂直margin、padding、width、height。
2.margin外边距合并问题
外边距的合并发生在以下三种情形:
情形一:空块元素
a)如果一个块级元素没有border、padding、inline content、height、min-height来分隔,设置margin-top和margin-bottom属性后会合并,
b)实例:
1
<style type="text/css">
2
body{margin:0;}
3
.out{width:400px;border:1px solid
#f00;margin:0 auto;background-color:#ccc;}
4
.inner{margin-top:40px;margin-bottom:40px;}
5
</style>
6
<div class="out">
7
<div class="inner"></div>
8
</div>
从上例可以看出,最后.out computed height为40px;
>=IE8、Firefox、Chrome测试效果相同。但是有个疑问,去掉out的边框后,其高度计算为0,不知道什么原因?
情形二:父元素与第一个或最后一个子元素
如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔,或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔,那么外边距会合并。
01
<style type="text/css">
02
body{margin:0;}
03
.parent{border:1px dotted
#ccc;width:400px;}
04
.outer{height:50px;background-color:
#f00;margin-top:40px;margin-bottom:40px;}
05
.inner01{margin-top:20px;background:
#00f;}
06
.inner02{margin-bottom:60px;background:
#f0f;}
07
</style>
08
<div class="parent">
09
<div class="outer">
10
<div class="inner01">inner01</div>
11
<div class="inner02">inner02</div>
12
</div>
13
</div>
>=IE6,FF,Chrome效果效果相同,此时inner01的margin-top:并没有起作用,这就是为什么很多人在网上问,我设置margin-top,margin-bottom不起作用的原因了!如下图:
情形三:毗邻的元素
1
<style type="text/css">
2
.ulist{margin:0;padding-left:0;list-style:none;width:200px;margin:0 auto;border:1px solid
#f00;}
3
.ulist li{padding-left:0;margin:10px;border:1px dotted
#f00;}
4
</style>
5
<ul class="ulist">
6
<li>列表一</li>
7
<li>列表二</li>
8
<li>列表三</li>
9
</ul>
>=IE6,FF,Chrome效果效果相同,重叠部分的取值为margin-top,margin-bottom中的最大值。如下图:
此时我们看到重叠也有重叠的好处
注:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
3.margin不起作用的情况?
行内(inline)元素设置垂直margin不起作用,块级元素的margin不好用时,建议使用padding来代替。
三、常见应用margin负值定位
1.IE6背景半透明效果按钮的制作
其就是使用margin负值定位实现按钮下半部分的颜色
2.新闻列表(带日期的)
这个是从新浪博客首页看到的实现新闻列表
1
<ul>
2
<li>new01<span class="date">2014-03-02</span></li>
3
<li>new02<span class="date">2014-03-02</span></li>
4
<li>new03<span class="date">2014-03-02</span></li>
5
<li>new04<span class="date">2014-03-02</span></li>
6
</ul>
ul li{height:24px;line-height:24px;}
设置.date{text-align:right;display:block;margin-top:-24px;},这时就不需要使用浮动来布局了
3.在选项卡等边框线的处理
当前选中的选项卡下边框颜色要设置选中色同时,内容的div上边框要设置margin-top:-1px;
4.图片与文字对齐问题
方法一:
vertical-align:text-bottom
方法二:
.img{margin:0 5px -2px 0;}
测试代码:
1
<style type="text/css">
2
body{margin:0;font-size:12px;font-family:arial;}
3
.out{width:400px;border:2px dotted
#f00;margin:20px auto;
4
}
5
.img{margin:0 5px -2px 0;}
6
</style>
7
<div class="out">
8
<img src="20.png" width="20" height="20" class="img">Benjamin=前端开发
9
</div>
四、参考链接
http://www.w3school.com.cn/css/css_margin_collapsing.asp
本文链接: http://www.zuojj.com/archives/191.html
如需转载请以链接形式注明原载或原文地址。
- 深入CSS属性(六):margin
- 深入理解css中的margin属性
- [CSS]CSS属性 margin
- 深入学习CSS中Margin和Padding属性用法
- 深入理解margin属性
- CSS margin 属性
- CSS:margin属性备忘
- css margin属性
- CSS margin 属性
- CSS margin-right 属性
- CSS margin 属性
- CSS中的margin属性
- CSS margin 属性
- CSS margin 属性详解
- CSS margin 属性
- CSS margin 属性
- CSS margin 属性
- CSS margin属性详解
- uc_day01
- 欧拉计划 第4题
- ViewHolder VS HolderView ?
- hibernate中的两种基本辨析
- 正则表达式30分钟入门教程
- 深入CSS属性(六):margin
- C#对象小知识点
- Java中super的几种用法并与this的区别
- HDU1267-动态规划
- MFC贪吃蛇+源代码
- 模拟学生档案管理系统
- 分享一份完整的spring data jpa demo代码
- Ajax工作原理
- 使用debug时报异常ognl.NoSuchPropertyException: