网页布局教程:边距和绝对定位

注意，由于存在四舍五入错误，在一些浏览器中你会看到盒子的底部和右边有1px的间隙，到目前为止，一切正常，现在让我们添加一些边距。

在下面的示例中四个不同的测试版本中，第一个box拥有left、top边距，第二个拥有bottom、right边距。剩下的两个与前两个相同但属性值为负。

分析

你注意到这种模式没有？只有在绝对定位元素的同一侧应用margin和定位属性值时margin才生效。实际上，在你定义了绝对定位元素的left属性后，你可以定义margin-left属性，这样会生效，其它几边是一样。

你或许会问，为什么是这样？一个有着严格尺寸的绝对定位box会通过两个相邻的属性(left、top、right、bottom)与其他元素相毗邻。余下的将被忽略或偏移你定义的尺寸大小。

既然只有绝对定位盒子的两侧与其他相联系，当定义margin时，只有这两侧发生反应。其余的两侧被描述为“半拉子”，它们不触及任何东西，在不干扰盒子声明尺寸或已定义属性值的一侧的情况下，其margin属性不产生任何推拉效果。很明显，这种行为不是很好，这样，那些无关的margin将被忽略。

当静态位置是在从左到右的流中计算时，自动定位盒子看起来好像是由left和top属性来决定的。这样，在我们的演示页中，right属性不会生效，bottom也是一样。

绝对定位盒子没有尺寸时也没什么不同（仅仅用两个相邻的属性来控制），因为在那种情况下，绝对定位盒子会在垂直和水平方向上收缩以适合内容，这样是的盒子看起来好像被定义了尺寸，尺寸大小刚好与内容的大小相同。唯一的例外出现在绝对定位盒子由两个相反属性控制时。

试试半拉子

让我们看看，你设置绝对定位盒子的left和right属性为0，但不定义任何宽度。这样盒子在其最近的定位的祖先元素中伸展直到填满所有所有水平空间。现在，绝对定位盒子的两侧与另外一个元素相关，这样，margin-left和margin-right将会生效，其值无论正负都有效，查看示例

正如你所看到的那样，正值挤压盒子的两边，而负值使盒子延伸出去。

需要牢记的是：IE6决不允许用两个相反的属性值来控制盒子的尺寸，这样margin也不会生效，除非给绝对定位盒子定义尺寸。

总结

我希望讨论能消除绝对定位盒子关于margin属性的疑虑，一旦这些问题得到理解，它就

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!