设置auto

网页设计中如果设置width、margin-left或margin-right中的某个值为auto，而余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。换句话说，假设7个属性的和必须等于400像素，没有设置内边距或边框，而且右外边距和width设置为100px，左外边距设置为auto。那么左外边距的宽度将是200像素：

p {margin-left: auto; margin-right: 100px; width:100px;}/*'auto' left margin evaluates to 200px */

从某种程度上讲，网页设计中可以用auto弥补实际值与所需总和的差距。不过，如果这3个属性都设置为100px，即没有任何一个属性设置为auto会怎么样呢？

如果所有这3个属性都设置为非auto的某个值—或者，按CSS的术语来讲，这些格式化属性过分受限（overconstrained）或者，此时总会把margin-right强制为auto。这意味着，如果外边距和width都设置为100px，用户代理将把右外边距重置为auto，右外边距的实际宽度则会根据有一个auto值时的规则来设置，即由这个auto 值“填补"所需的距离，使元素的总宽度等于其包含块的width。图7-6显示了以下标记的结果：

p {margin-left: 100px; margin-right: 100px;

width! 100px;}/* right margin forced to be 200px */

图7-6：覆盖margin-right设置

注意：网页设计只是对从左向右读的语言（如英语）将margin-right强制为auto。如果是从右向左读的语言，一切正相反，所以会把margin-left强制为auto，而不是margin-right.

如果两个外边距都显式地设置，而width设置为auto, width值将设置为所需的某个值，从而达到需要的总宽度（即父元素的内容宽度）。以下标记的结果如图7-7所示：

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

图7-7中所示例子最为常见，因为这等价于只设置外边距，而没有为width作任何声明。以下标记的结果与图7-7所示完全相同：

p {margin-left: 100px; margin-right: 100px;}/* same as before */

不只一个auto

下面来看如果这3个属性（width、margin-left或margin-right）中有两个都设置为auto会出现什么情况。如果两个外边距都设置为auto，如以下代码所示，它们会设置为相等的长度，因此将元素在其父元素中居中，如图7-8所示：

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

将两个外边距设置为相等的长度是将元素居中的一种正确方法，这不同于使用text-align (text-align只应用于块级元素的内联内容，所以将元素的text-align设置为center并不能将这个元素居中）。

警告：网站建设中，只有1999年2月以后发布的浏览器能正确地处理auto外边距居中，而不是所有浏览器都能完全做对。不能正确处理auto外边距的浏览器表现也各不相同，不过可以肯定的一点是，老式的浏览器会把两个外边距都重置为0。

设置元素大小的另一种方法是将某个外边距以及width设置为auto。设置为auto的外边距会减为0:

p {margin-left: auto; margin-right: 100px; width: auto;}/* left margin evaluates to 0 */

然后width会设置为所需的值，使得元素完全填充其包含块。

最后一点，网页设计中如果这3个属性都设置为auto会怎么样呢？答案很简单：两个外边距都会设置为0，而width会尽可能宽。这种结果与默认情况是相同的，即没有为外边距或width显式声明任何值。在这种情况下，外边距默认为0, width默认为auto。

注意，由于水平外边距不会合并，父元素的内边距、边距和外边距可能影响其子元素。这种效果是间接的，即一个元素的外边距（以及内边距。边距等等）可能会为子元素带来偏移。以下标记的结果如图7-9所示：

div {padding: 30px; background: silver;} 

p {margin: 20px; padding: 0; background: white;}