一般地，网站建设中元素的大小和位置取决于其包含块。各个属性（width、right、padding-left 等）的值也会有一些影响，不过最主要的还是其包含块。

考虑一个定位元素的宽度和水平放置。这可以表示为一个等式：

left+margin-left+border-left-width+padding-left+width+padding-right+border-right- width+margin-right+right=包含块的width。

这个计算是很合理的。基本上会由这个等式来确定正常流中块级元素的大小，除非增加了left和right。所有这些属性之间有什么关系呢？以下是一组规则。

首先，如果left、width和right都设置为auto，会得到上一节所示的结果：左边界置于其静态位置（假设使用从左向右读的语言）。在从右向左读的语言中，则是右边界置千其静态位置。元素的width设置为“收放得正好合适”，这说明该元素的内容区宽度恰好只能包含其内容（而没有多余空间）。这与表单元格的行为很类似。非静态位置属性要适当设置，以保证余下的距离。例如：

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 0; right: auto; width:auto;

background: silver;">shrink-wrapped</span> thanks to the way positioning rules work.

</div>

这会得到如图10-44所示的结果。

网站建设元素的顶端根据其包含块的顶端放置，且元素的宽度刚好足够包含内容。从元素右边界到包含块右边界之间余下的距离则是right的计算值。

假设左右外边距都设置为auto，而left、width和right不是auto，如下例所示：

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: l0em; margin: 0 auto; background: silver;">shrink-wrapped</span> thanks to the way positioning rules work.

此时，左右外边距会设置为相等的值。这实际上会让元素居中，如图10-45所示。

这与正常流中的auto外边距居中行为基本上是一样的。所以，假设外边距不为auto:

<div style="position: relative; width: 25em; border: 1px dotted;">

An absolutely positioned element can have its content

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em;

margin-left: 1em; margin-right: 1em; background: silver;">shrink-wrapped</span> thanks Co the way positioning rules work.

</div>

现在就有问题了。网站建设定位元素span的属性只增加为14em，而包含块宽度为25em。这里有11em的差额，必须从某个地方弥补。

规则指出，在这种情况下，用户代理会忽略right的值，并重置right的值。换句话说，其结果就好像声明了以下规则一样：

<span style="position: absolute; top: 0; left: 1em; right: 12em; width: 10em; margin-lefc: 1em; margin-right: 1em; background: silver;">shrink-vn:apped</span>

其结果如图10-46所示，

如果某个外边距保持为auto，则会改变这个外边距。假设将样式改为：

<span style="position: absolute; top: 0; left: lan; right: 1em; width: 10em; margin-left: 1em; margin-right: auto; background: silver;">shrink-wrapped</span>

视觉效果与图10-46所示相同，只不过这是通过将右外边距重新计算为12em得到的，而不是覆盖为属性right指定的值。另一方面，网页设计人员如果将左外边距置为auto，则会重置左外边距，如图10-47所示：

图10-47：过度受限情况下忽略margin-left的值

一般地，如果网页设计人员只把一个属性设置为auto，就会修改这个属性来满足本节前面给出的等式。给定以下样式，元素会延伸到必要的宽度，而不是“收缩”内容：

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em; margin-left: auto; margin-right: 1em; background: silver;">shrink-wrapped</span>

到目前为止，我们实际上只考虑了水平轴的行为，不过对于垂直轴，规则非常类似。还是看前面的讨论，只要将其旋转90度就会得到几乎相同的行为。例如，以下标记会得到如图10-48所示的结果：

<div styles"position: relative; width: 30em; height: 10em;border: 1px solid;">

<div style="position: absolute; left: 0; width: 30%; background:#CCC;top: 0;"> element A </div>

<div aty-le='position: absolute; left: 35%; width: 30%; background:#AAA; top: 0; height: 50%;"> element B"

<div style="position: absolute; left: 70%; width: 30%; background:#CCC;height: 50%; bottom: 0;"> element C </div>

在第一个例子中，元素的高度收缩为内容的高度。在第二个例子中，未指定的属性（bottom）设置为适当的值，来弥补定位元素底端与其包含块底端之间的距离。在第三个例子中，未指定的属性是top，所以由top来弥补定位元素顶端与其包含块顶端之间的拒离。

对此，外边距为auto可以得到垂直居中的效果。给定以下样式，绝对定位元素div将在其包含块中垂直居中，如图10-49所示：

<div style="position: relative; width: 10em; height: 10em;border: 1px solid;">

<div style="position: absolute; left: 0; width: 100%; background:#CCC; top: 0; height: 5em; bottom: 0; margin: auto 0;">

图10-49：将外边距为auto的绝对定位元素垂直居中

还要指出两个小变化。在水平布局中，如果值设置为auto, right或left都可以根据其静态位置放置。但在垂直布局中，只有top可以取静态位置，出于某种原因，bottom 做不到。

注意：写作本书时，Internet Explorer的所有版本都不支持绝对定位元素通过将上下外边距设置为auto来实现垂直居中的行为。

另外，如果一个绝对定位元素的大小在垂直方向上过度受限，将忽略bottom。因此，网站建设对于以下情况，bottom的声明值会被计算值5em覆盖：

<div style="position: relative; width: 10em; height: 10em;border: 1px solid;">

<div style:"position: absolute; left: 0; width: 100%; background:#CCC;top: 0; height; 5em; bottom: 0; margin: 0;"> element D </div>

</div>

如果属性过度受限，没有规定将top忽略。