在CSS的负边界：很好的教程和技巧网站？

当我看到网站时，有时会让我困惑的CSS方面之一是用于布局的负边距。我花了一段时间才了解设计师正在尝试如何处理页面上的负边距。我的意思是一个页面有几个div，有几个页面使用负边距，我试图让我的头脑试图找出它们。我使用Firebug来更改值并查看效果。在CSS的负边界：很好的教程和技巧网站？

是否有一个很好的教程，一揽子的技巧网站，教网站设计师如何使用负利润率的优势。当然，跨浏览器的技巧。

试图找出剩余的余量：-100％。

来源

2009-06-27 Tony_Henrich

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>

来源

2009-06-27 00:49:09 cletus

小记：

在网站我需要布置整个包含8-12个“盒子”（1）的首页，因此我使用“boder：1px纯黑色”来查看这些框位于正确的位置，然后用一个牢固的背景填充它得到“莫重新或更少的网站设计“。

几天后，真正的背景图像来了。图像包含一些“阴影”，图像的内容是基于我使用的纯色的阴影。

解决方案是使用“margin：0px-5px-5px-5px”来保留确切的位置/大小，然后将新图像设置为原始框的背景。

希望这给你一个关于何时使用负边界的想法。（1）客户使用的术语是拉默尔

来源

2009-06-27 15:38:02 elcuco

在CSS的负边界：很好的教程和技巧网站？

回答

相关问题