負margin使用完全指南
- 八月 26th, 2009
《The Definitive Guide to Using Negative Margins》
原文地址：http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
转载译文请注明出处，谢谢。如有错误欢迎指正。此文我自覺翻譯得不好，翻譯只為學習哈，多做測試概念會清晰很多～
從1998年CSS2的建議實行以來，table逐漸淡出了歷史舞臺，CSS布局從此成為優雅編碼的代名詞。在一些情況下進行布局和定位時我們需要使用負margin，但是幾乎沒有人想要討論它。
1、關于負margin的基本常識
在CSS中我們都需要使用到margin，但是當margin變成負值時，事情變得有些微妙。對于在網頁設計中使用負margin，有些人非常喜歡，也有另外一部分人認為這是錯的。
負margin的使用類似這樣：
#content {margin-left:-100px;}
負margin通常被應用在一些小細節上，不過稍后你將發現，它的作用遠甚于此。首先了解一下關于負margin的一些基本常識：
■負margin是完全符合標準的CSS
W3C也層提到過“對margin使用負值是允許的…”，查看這里可以了解更多詳情。
■負margin不是HACK
這是事實。只有當你用它來修正頁面上存在的某個錯誤時，它才變成了HACK。
■負margin存在于正常文档流（It goes with the flow）
只要不將負margin應用在浮動元素上，它不會破壞文档流。所以當你對一個元素使用負margin讓它向上移動時，所有緊隨其后的元素都會跟著它上移。
It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well.
■負margin具有很高的兼容性
負margin全面兼容所有的現代瀏覽器（IE6在大多數情況下也顯示正常）。
■當元素應用了浮動以后，負margin的表現會有所不同。(It reacts differently when floats are applied)
負margin不是常用的CSS，所以應用它的時候要非常小心。
■Dreamweaver 無法理解負margin
在DW的設計模式下負margin無法正確呈現，不過，你干嗎要使用DW的設計模式捏？
2、如何使用負margin
如果正確應用負margin，它的作用是非常強大的。在以下兩種情況下負margin能力非凡：
對无特殊定位的元素使用負margin (Negative Margins on Static Elements)
无特殊定位的元素是指沒有應用浮動的元素。上面的圖片演示了無特殊定位元素應用了負margin以后是如何變化的。
■當一個無特殊定位元素在top/left方向添加了負margin以后，它將朝那個特定方向移動。
/* Moves the element 10px upwards */
#mydiv1 {margin-top:-10px;}■但是當你將負margin應用到bottom/right方向上時，該元素不會如你想象的向下或向右移動；相反地，緊隨其后的元素會部分移動并覆蓋在該元素上。
/*
* All elements succeeding #mydiv1 move up by
* 10px, while #mydiv1 doesn’t even move an inch.
*/
#mydiv1 {margin-bottom:-10px;}■如果沒有為該元素定義寬度，那么在它的左邊和右邊添加負margin時會兩邊同時增加它的寬度，也就是說負margin此時類似padding的作用。
對浮動元素使用負margin
以下面的代碼為例：
<div id="mydiv1">First</div> <div id="mydiv2">Second</div>
■當所設置的負margin方向與元素浮動的方向相反時，it creates a void leading to the overlapping of content.這對于流式布局來說非常好，比如說一欄的寬度是100%而另一欄寬度固定，如100px。（很難形容，做一下測試比較理解。）
■If a negative margin is applied opposite a float, it creates a void leading to the overlapping of content. This is great for liquid layouts where one column has a width of 100% while the other has a definite width, like 100px.
/* A negative margin is applied opposite the float */ #mydiv1 {float:left; margin-right:-100px;}
■如果兩個元素都向左浮動，假設#mydiv1的margin-right值為-20px，那么#mydiv2會認為#mydiv1的寬度比實際的小20px從而覆蓋這部分。
■如果#mydiv1的負margin值恰好相當于它的寬度，那么#mydiv2會完全覆蓋它。這是因為元素的實際寬度是由margin，padding，邊框和設定的寬度的總和構成的。所以如果負margin的值恰好等于元素設定的寬度，那么元素的實際寬度就變成0。
3、技巧效果
現在我們已經知道應用負margin是一種符合CSS2規范的技巧，所以可以用它來實現一些非常有意思的效果。
■用無序列表（ul）來做一個3欄列表
你是否厭倦了ul那種冗長的垂直展示方式？為何不試著分欄來顯示它？使用負margin可以在不浮動任何元素也不添加多余標簽的情況下實現這種效果。
html:
<ul> <li>Eggs</li> <li>Ham</li> <li></li> <li>Bread</li> <li></li> <li>Butter</li> <li></li> <li>Flour</li> <li></li> <li>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.6em(li行高的兩倍)，所有的元素都調整到適當的位置；你會發現使用負margin比相對定位更加恰當，因為你只需要對每一個新建的欄的第一個li添加該樣式。
■以疊加的形式來強調某些頁面元素 Overlap for added emphasis
有目的的對某種元素進行疊加是一種不錯的設計寓意。通過這種疊加效果可以使提升整個設計在視覺上的深度，從而達到對特定元素所起的強調作用。例如Phlashers.com的評論區的設計就是個不錯的例子，它通過這種疊加的技巧使用戶將注意力集中到已評論的個數上。應用負margin和z-index你就可以實現這個效果。
■3D文本效果
這是個很贊的效果，創造像safari那樣帶有輕微斜面的立體文字。你需要創建雙份文本，用兩種不同的顏色；然后使用負margin使其中的一個向另一個疊加，留下1-2像素的間距，這樣你就能做出可點可選、對搜索引擎友好的真正的立體文字，而不需要使用消耗大量帶寬的jpeg或gif圖片。
■簡潔的二欄布局
負margin是用來創建二欄流式布局的絕佳方案。這種布局具有一個固定寬度的邊欄和100%寬度的主要內容區。
HTML：
<div id="content"> Main content in here</div> <div id="sidebar"> I’m the Sidebar!</div>
CSS：
#content {width:100%; float:left; margin-right:-200px;} #sidebar {width:200px; float:left;}
這樣你就能輕松得到一個即使是IE6也完美支持的二欄簡潔布局！接下來，為了使邊欄不覆蓋掉主要內容區的文本，可以加上以下樣式：
/* Prevent text from being overlapped */ #content p {margin-right:210px;} /*210px是邊欄的200px+10px所得,10px是為了使主欄的文本和邊欄的文本不要湊得太緊*/
只要使用恰當，負margin同樣可以創造出非常靈活的文檔結構（Flexible Document Structure ），讓table從布局上完全消失。所謂的靈活的文檔結構是指一種具有易用性和搜索引擎優化的技巧，它允許你按照一定的意圖在頁面上任意安排你的標簽。Tom Wright曾寫過一篇非常有趣的文章來討論在多欄布局中應用負margin的可行性。
■對頁面元素進行微調
這是負margin最常見和普遍的用途。假設你要在9個div中插入第10個div，但是怎么調整也無法讓它們對齊，那么最好的辦法就是對第10個div使用負margin進行微調，而不是一一去調整其他9個div的位置。
4、解決負margin帶來的BUG
■文本和鏈接的問題
負margin和浮動同時使用時對一些舊的瀏覽器會引起一些問題，其中包括:
1 鏈接不可點擊
2 文本變得難以被選中
3 鏈接失去焦點時消失了
解決以上問題的方法是加上position：relative；
■圖片等內容被截半
如果你還在使用IE6，很不幸的有時你會發現使用了負margin后一些內容被截半了，這種情況通常發生在元素疊加或浮動時。
解決方法依然是：position：relative；
5、結論
由于可以在不添加任何多余標簽的情況下對元素進行定位，負margin在現代web設計中是占有一席之地的。隨著越來越多的用戶更新他們的瀏覽器版本（包括IE8），負margin的應用將擁有更光明的前景。
