在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的負邊界：很好的教程和技巧網站？

回答

相關問題