CSS中的auto讲解

首先来说一下 右对齐margin-left:auto; 左对齐margin-right:auto; 以及居中对齐margin:0 auto; 注意margin-left:auto是右对齐，而margin-right:auto;是左对齐，并不是我打错了，它就是这样。
这三个与margin有关的auto是用来对齐元素的，你需要记住以下几点：
1.该元素必须是区块(如果还不熟悉区块和内联的话我可以以后再介绍一下区块和内联的区别，这里假设你已经了解了区块和内联的区别了)。
举几个例子 <div> <p> <h1> <h2> <h3> <h4> <h5> <h6> <table> 等等这些元素是区块，单独占据一行，这些元素可以使用margin:0 auto; 
<img> <embed> <span>等等这些不是区块，是内联，他们不可以使用margin:0 auto;使用了也没有效果。(如果想让他们对齐可以手动将他们变为区块，display:block;)

2.该元素需要设置宽度，如果不设置宽度，则默认宽度为width:auto;一会再解释width:auto;的情况，你只需要记住，如果不设宽度，很多情况该区块的宽度会与父元素的宽度一样，这样就无所谓左对齐右对齐或居中对齐了，因为该元素会一直占据着整个父元素的宽度。只有当该元素的宽度小于父元素的宽度时候，才能看出左对齐，右对齐和居中对齐的效果。

然后再说一下width:auto;的情况，这个比较复杂。
首先你需要理解一个区块 比如<div>，如果不给它设置width，那么浏览器会自动给该区块自动赋值为auto,当然，你也可以手动给<div>设置为width:auto; 而设为width：auto；的div的宽度到底是多少呢，这个你需要了解盒模型的概念，建议你看书来了解一下，或者上网搜一下盒模型，因为这个需要用图来说明，否则很难表达清楚。不过我这里还是给你简单介绍一下，一个区块设置为width:auto;之后，会根据父元素的width，该元素本身的margin，该元素本身的border，该元素本身的padding来一起决定该元素的width。 换句话说，该元素的width+padding*2+border*2+margin*2 = 父元素的width。假设你的父元素的width是200px，而当前元素本身的padding为5px，border为1px solid red,margin为10px;当前元素的width为auto，那么浏览器会自动计算width,200-(5*2+1*2+10*2) = 168 为什么都要乘以2呢，因为边距既有左边又有右边，同样border也是既有左边又有右边，所以需要乘以2，加入你只设置了padding-left:5px;而padding-right:0px;那么就不需要乘以2了。

以上说明的是非浮动情况下的width:auto;如果浮动一个width:auto的区块，则由于该区块脱离了文档流，所以以上的情况一律不适用，那该区块的width将会根据区块的内容自动扩展。换句话说，如果区块内容只有hello这个单词，那么该区块的width就是包括该hello单词的宽度，你加一个背景颜色就能看出来了。加入该区块的内容是hello world，那么该区块的width则为包括hello world的宽度，当然以上所说的都是width:auto的区块，如果一个区块显示指定了width,比如width:200px;那么不管浮动还是不浮动，该区块的width永远都是指定的宽度。