阅读: 1 评论: 0 作者: wj-conquer 发表于 2010-03-03 22:47 原文链接
.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，而且更方便，兼容更好
最新新闻：
· IBM发布第五代X架构 打破X86系统30年技术局限(2010-03-03 22:47)
· 互联网手机业务成香馍馍 上海电信盯牢3G市场(2010-03-03 22:38)
· Twitter信息总量即将突破100亿条大关(2010-03-03 22:34)
· Opera为何无法进一步拓展市场(2010-03-03 21:38)
· Symbian版 Skype登陆诺基亚Ovi Store(2010-03-03 21:04)
编辑推荐：Opera为何无法进一步拓展市场
