一般来说，CSS 宽度可能有点令人困惑。绝对宽度很容易。相对宽度可能会导致一些有趣的行为。基本上，百分比宽度是相对于包含元素的。如果父元素有绝对宽度，那么很容易计算出来。但通常情况并非如此，因此您可以进行复杂的计算，了解浏览器如何计算它需要多少空间。如果它的所有子项都是百分比宽度，那么它的宽度通常会比设计者通常预期的要小。
所以当你看到margin-left: -100%，这基本上意味着将此元素移到其父级之外，向左移动父级的完整宽度。负边距（尤其是负边距）的一个后果是，他们搬入的空间通常无法满足他们的需求，在规划布局时必须考虑到这一点。
另一个好的提示是，如果您遇到这种情况：
<div id="outer">
Outer
<div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>
它不会真正起作用。或者更确切地说，它可以在 (iirc) Firefox 上运行，但不能在 IE（任何版本）上运行。所以如果你想做这样的事情，你需要使用包含元素。
<div id="outer">
Outer
<div id="wrap">
<div id="inner">Inner</div>
</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>
这将更加兼容浏览器。
这是一个演示负边距的完整示例（已在 FF、Chrome 和 IE8 上验证）：
删除了无效的 ImageShack 链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; }
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
