解析margin的自动值auto

最新推荐文章于 2023-07-25 11:36:26 发布

转载最新推荐文章于 2023-07-25 11:36:26 发布 · 542 阅读

CSS学习专栏收录该内容

1 篇文章

订阅专栏

本文探讨了CSS中margin属性的自动值(auto)在不同情况下的表现，包括单个元素如何实现居中对齐，以及当margin的一个或多个值设置为auto时浏览器是如何计算其具体值的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解析margin的自动值auto

(2011-05-21 13:14:31)

转载▼

标签：

杂谈

作者: wj-conquer 发表于 2010-03-03 22:47 原文链接

.nav {
position: relative;

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，而且更方便，兼容更好