css auto那些事

　　最近又重新看了一遍《css权威指南》，重点关注了一下盒模型。

　　对于元素框的width和height以及margin属性来讲，auto是一个很有趣的值；不同情况下auto的值也不尽相同，因此小小总结一下。

　　explantion:由于此处着重讨论width和margin属性，因此假设元素框的padding和border均为0；

假定有一面一段html文档代码。以下都会以此结构来讨论。

<div>

<p>auto example<p>

</div>

先上结论吧。

margin-left,width,margin-right中auto数量为0

css里有个规则：正常流中块级元素框的水平部分总和就等于父元素的width。因此，如果设定的margin-left,width,margin-right三者之和等于父元素的width，则按设定的样式显示，可以把这当成理想状态。

div{width:600px;}

p{margin-left:100px;width:200px;margin:300px;}

但是，总会有不理想的状态；

div{width:600px;}

p{margin-left:100px;100px;300px;}

很明显，此时p元素的总宽度为500px,不等于父元素的width 600px，此时就是css中的格式化属性过分受限，这个时候浏览器就会“被动的”

设置margin-right值为auto，为400px,从而是总宽度等于父元素的width。但是此处还有一个例外，如果文档文本的文字方向是从右向左(rtl),浏览器会强制使margin-left的值为auto，也就是200px。

margin-left,width，margin-right中auto数量为1

margin-left,width,margin-right中两个属性为特定的值,另外一个为auto,是最简单，也最容易理解的。由于三者宽度之和

为父元素width的值，因此值为auto的属性的值此时变为父元素的width减去另外两个给定值之和。

因此，以下几个例子的显示效果完全相同。

// example 1

div{width:600px;}

p{margin-left:100px;width:200px;margin-right:auto;}

//example 2

div{width:600px;}

p{margin-left:100px;width:auto;margin-right:300px;}

//exampe 3

div {width:600px;}

p{margin-left:auto;width:200px;margin-right:300px;}

margin-left,width,margin-right中auto数量为2

如果指定的特定值为width,margin-left和margin-right为auto，这就是最常见的水平居中的实现形式，浏览器将会使margin-left的值

等于margin-right的值。

div{width:600px;}

p{margin-left:auto;width:300px;margin-right:auto;} // it means “margin-left:150px,margin-right:150px”

但是如果指定的特定值是margin-left或者margin-right中的某一个，情况就不是简单的两个设为auto的属性“对半分”剩下的宽度了。

此时浏览器会把剩余长度全部给到width上，设置为auto的margin的值会变为0；

div{width:600px;}

p{margin-left:100;width:auto;margin-right:auto;} // it means “width:500px , margin-right:0”

div{width:600px;}

p{margin-left:auto;width:auto;margin-right:100px;} // it means “width:500px,margin-left:0”

margin-left,width,margin-right全为auto

这种情况下，就只有一种结果,该元素的width将获得父元素width的全部长度，元素的外边距为0，元素的文本内容填满整个元素框。

div{width:600px;}

p{margin-left:auto;width:auto;margin-right:auto;}

总结

以上就是水平方向是auto属性值的所有情况。最难理解的就是第(3)(4)中情况。个人理解就是浏览器对于各个属性以及给定各个值的“优先度”的顺序的区别。

一般可以认为顺序如下：特定值 > width属性 > margin属性，margin-left,margin-right的优先度相同。

也就是如果三个属性中某个属性为特定的值，那么它的值将不会改变。至于剩下的长度，优先全部给与width属性。

原文地址：https://github.com/zengxiaotao/css-auto-