負margin使用權威指南

自CSS2早在1998年,推薦表的使用已經慢慢褪色成背景和歷史書中。正由於如此,CSS佈局從那時起一直編碼優雅的代名詞。

的全部CSS概念設計師所使用,獎項可能須要給負margin的使用是最至少談論的定位方法。這就像一個在線taboo-everyone的這樣作,然而,沒有人願意談論它。

 

1。設置連續記錄

咱們都使用咱們的CSS,但當談到負margin,咱們的關係在某種程度上管理採起一個更糟的方向發展。使用負margin率在網頁設計絕對是分歧如此之大,而咱們中的一些人喜歡它,還有那些簡單地認爲這是魔鬼的工做。

margin率爲負看起來像這樣:

#content {margin-left:-100px;}

負margin一般應用於小劑量但稍後您將看到,它是可以作得更好的。關於負margin,要注意幾件事情:

 

他們很是有效的CSS

在這一點上,我不是在開玩笑。W3C甚至表示,「負margin值屬性容許…」」足夠地說。看看這篇文章瞭解更多細節。

 

負margin不是hack

這是尤爲如此。這是由於沒有正確理解負margin,獲得其hackish形象。它只成爲一個黑客若是你用它來修復一個錯誤了。

 

它跟流

它不會打破的頁面流,若是應用於沒有浮動元素。所以若是你使用一個消極的邊緣向上推進一個元素,全部成功的元素也會當心翼翼。

 

它是高度兼容的

負margin徹底支持全部現代瀏覽器(和IE6在大多數狀況下)。

 

當浮動應用就會有不一樣的反應
負margin不是你平常CSS因此他們應該當心應用。

 

Dreamweaver並不理解它
負margin不出如今DW的設計視圖。爲何你甚至在設計視圖檢查你的網站呢?

 

2。使用負margin

當正確使用負margin率很是強大。有2種場景負margin採起中心舞臺。

 

負margin率靜態元素

 

一個靜態的元素是一個元素,而不該用浮動。下圖說明了靜態元素反應負margin。

 

當一個靜態元素是給定一個左/上負margin,它把元素指定的方向。例如:

/* Moves the element 10px upwards */

#mydiv1 {margin-top:-10px;}

但若是你把它應用到/右底部,它不是移動的元素/右像你想象的。相反,它把任何成功元素爲主要元素,重疊。

/* 
* All elements succeeding #mydiv1 move up by
* 10px, while #mydiv1 doesn’t even move an inch.
*/

#mydiv1 {margin-bottom:-10px;}

若是沒有寬度,增長負margin的左/右拉元素在兩個方向上增長其寬度。在這裏,就像一個填充。

 

負margin浮動元素

 

考慮這是咱們實際的標記:

<div id="mydiv1">First</div> <div id="mydiv2">Second</div>

若是margin率爲負是應用相反的一個浮點數,它建立一個空白致使內容的重疊。這是對液體佈局,一列寬度爲100%,而另外一個明確的寬度,像100 px。

/* A negative margin is applied opposite the float */
#mydiv1 {float:left; margin-right:-100px;}

若是兩個元素浮動左右margin-right:-20 px應用於# mydiv1,# mydiv2對待# mydiv1彷彿20 px寬比實際小(所以,重疊)。有趣的是,# mydiv1的內容根本沒有反應,繼續保持目前的寬度。

若是負margin率等於實際的寬度,而後它徹底重疊。這是由於margin率、填充、邊界,和寬度元素的總寬度。因此若是負margin率等於剩餘的尺寸而後元素的有效寬度變成0 px。

 

3。有效的技術

由於咱們如今知道,應用負margin率是有效CSS2代碼,使用它提供了一些很是有趣的CSS技術:

 

製做一個< UL > 3-COLUMN列表

若是你有一個項目列表太長顯示垂直,爲何不把他們分紅列呢?負margin讓你作這個不用添加任何漂浮或額外的標記。使人驚訝的是它很容易讓你把下面的列表分紅3單獨列,像這樣:

HTML

<ul> 
      <li class="col1">Eggs</li> 
      <li class="col1">Ham<li> 
      <li class="col2 top">Bread<li> 
      <li class="col2">Butter<li> 
      <li class="col3 top">Flour<li> 
       <li class="col3">Cream</li> 
</ul>

CSS

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

經過添加margin-top:-2.6 em(兩倍行距的<li>)。前,全部元素完美對齊。使用負margin率比應用相對定位更合適,由於你只須要應用到第一個新列,而不是每一個<李>標記。酷吧?

 

爲了增長重點重疊

故意重疊元素也是一個好的設計的隱喻。它增長了強調特定元素自重疊效應產生深度的錯覺。將是一個很好的例子的評論部分 Phlashers.com ,,它使用一種重疊的技術關注評論一篇文章的數量。把這與z - index屬性和創造力和你有了一點。

 

粉碎3 d文字效果

這裏有一個整潔的把戲。建立Safari-like文本,略斜經過建立2版本的文本在2個不一樣的顏色。而後使用負margin率重疊在另外一個的差別在1或2像素,你有選擇,robot-friendly坡的文本!不須要巨大的jpeg或gif吞噬帶寬像胖豬。

 

簡單2-COLUMN佈局

負margin也是一個很好的方法來建立簡單的2-column液體佈局,側邊欄有一個預設寬度和內容有一個液體寬度的100%

HTML

<div id="content"> <p>Main content in here</p> </div> 
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

和你有一個簡單的佈局2-column記錄時間。它工做在IE6太完美!如今,爲了防止#欄重疊#內的文本內容,簡單的添加

/* Prevent text from being overlapped */

#content p {margin-right:210px;}

/* It’s 200px + 10px, the 10px being an additional margin.*/

若是使用得當,負margin還能夠提供所謂的靈活的文檔結構,絕對踢桌子的臉。靈活的文檔結構是一個可訪問性和搜索引擎優化技術,容許您安排標記在幾乎任何順序取決於你的意圖。湯姆·賴特寫的一篇有趣的文章,討論了可能的應用負margin的多列布局。

促使元素到位

這是最多見的(簡單)使用狀況負margin。若是您插入一個10 div 9其餘div,不知怎麼的就不會正確對齊,用負margin推進10 div到位而不用編輯其餘9。

 

若是使用得當,負margin還能夠提供所謂的靈活的文檔結構,絕對踢桌子的臉。靈活的文檔結構是一個

4。修正

文本和連接的問題
使用負margin浮動有時惹怒了老版本瀏覽器。一些症狀包括:
使連接會斷掉
文本很難選擇
指定任何連接消失當你失去焦點
解決方案:只需添加位置:相對的,它的工做原理!

 

個人照片有截止
若是你有在辦公室使用IE6的壞運氣,有時內容會忽然被切斷時,重疊和漂浮。
解決方案:再次,只需添加位置:相對於被浮動元素,一切恢復正常。

5。結論

負margin在現代網頁設計,由於它沒有任何額外的標記位置元素的能力。與更多的用戶切換到更多更新的瀏覽器(包括IE8),將來看起來很光明網站依賴於這種技術。
與負margin,若是你有任何獨特的經歷讓我知道經過發表置評。

 

6。資源

更多信息在負margin。

• Search This, The Positive Side of Negative Margins
• Severn Solutions, CSS Negative Margins Algebra
• Mindfly, Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess
• A List Apart, Creating Liquid Layouts with Negative Margins
• W3.org, Margin Properties
• Branbell, Using Negative Margins
• devarticles, Swapping Column Positions in Web Page Layouts with Negative Margins
• Simplebits, Exceptionally Negative
• CommunityMX, CSS Negative Margins
• brunildo, Horizontal Negative Margins
• Ben Nadel, Negative CSS Margins Are Not Cool
• bluerobo, Centering: Negative Margin
  
  
• 原文地址：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• 如需轉載，註明地址：http://www.cnblogs.com/leejersey/p/3477855.html