CSS中auto的作用

随着不断深入的学习css，发现在css中有很多属性都可以把值设定为auto，auto在英文里有着自动的意思，但是在css中这个自动值到底是什么呢？它在css中到底会产生一个什么样的作用？它有什么实际的意义吗？总是会产生如此的一些疑问。

就拿我之前碰到的一些小问题来说说，比如margin：auto是如何实现居中的？自动在这里到底是表示什么样的值？它到底是如何来实现居中的？

在仔细研究了相关的资料后，我找到了一个代码，实现居中的代码是这样的：#main{margin: 0 auto;}
根据 上右下左的顺序，完整的代码应该是#main{margin: 0 auto 0 auto;}
这个原理是盒子模型的顺序，意思是：盒子的上下边距是0，左右是auto，这样，就实现了盒子居中了。auto就是根据浏览器的渲染而给她赋值。意思就是浏览器内置的值赋给它，或者是继承下来的值赋给它，auto在‘这里’是没有任何意义的。
但是既然没有任何意思，那怎么就实现了居中呢？单只根据理论，我心里还是对这个auto存在着一定的疑虑，为什么当左右是auto时，盒子就会居中呢？为什么要将上下设置为0呢？浏览器是怎么处理auto的呢？看来要更透彻的了解auto的相关涵义和用法，必须要在实际使用的环境中才能得出一个完满的结论。

于是我做了如下的一些测试，分别赋予上下左右不同的值：

1.margin:0 10px 0 auto;

2.margin:0 auto 0 10px;

.............

..............

...............

......................................................阅读全文，请点击K.N.J的博客

 

此文转载自：K.N.J

相关信息：

1.如何实现图片链接？

2.HTML中INPUT的对齐问题.

3.360和金山词霸杀毒的不同。