解析margin的自动值auto

.nav {
 position: relative;
 /*
 margin: 0px  0px 0px 0px;   /*主菜单的距离  为:上,右,下,左*/
 width:961px;
 margin: 0 auto 0px auto;
 background: url(images/bImg/nav_bg.png) no-repeat 0 -36px;
}

======================

使用margin的auto值有什么好说的呢。一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto。在这里和大家讨论一下三者之间的关系 。下面 介绍一下几条原则:

1. auto 可以解释为:弥补其它部分与所要求总合之间的差别;

2.如果三个属性都没有被设置成auto ,那么margin-right会被强制设为auto;

3.如果两个边界都被设为 auto ,则被设为相等的值。

4. 如果两个边界之一和width设为auto ,则被设置为auto的边界值为0;

5.三个都被设为auto ,则2个边界的值都为0,width的值为最大可能值。

写得有点乱,记得以前看过一些资料有这方面的详细描述,只是现在想不起也找不到了。不过大概也就这几个点了,了解一下就可以。

手册上说的auto自动是字面的意思,但手册毕竟是手册和我们实际应用是有区别的。

定义一个方向为auto,可以理解为此方向随便,自由

以前不是有个经典的FF居中么 margin:0 auto,这个其实在IE6下支持也是很好的,于是也有了如下延伸:

margin:0 auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 auto;"></div>
</div>
</body>
</html>

margin:0 auto 0 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 auto 0 0;"></div>
</div>
</body>
</html>

margin:0 0 0 auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div style="height:300px; background:#ccc;">
        <div style="width:50px; height:50px; background:#f00; margin:0 0 0 auto;"></div>
</div>
</body>
</html>

注意:没有上或者下方向的auto
此应用一定程度上可以代替float,而且更方便,兼容更好

posted @ 2010-03-03 22:47  wj-conquer  阅读(1896)  评论(0编辑  收藏  举报