負margin

自從1998年CSS2做爲推薦以來，表格的使用漸漸退去，成爲歷史。正由於此，從那之後CSS佈局成爲了優雅代碼的代名詞。

對於全部設計師使用過的CSS概念，負邊距做爲最少討論到的定位方式要記上一功。這就像是在線紋身-每一個人都會作，可是沒有人會談論它。（It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.）

爲其正名

咱們都使用過CSS得外邊距，可是當談到負邊距的時候，咱們好像往差的方向發展啦。在網頁設計中負邊距的使用出現了兩種極端，一種特別喜歡它，也有一些人認爲這徹底就是魔鬼的做品。

負邊距的使用以下：

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

負邊距一般在小範圍使用。可是接下來你會看到，它能作的事情不少。下面是一些你應該知道的關於負邊距的事情：

他們是徹底有效的CSS
這不是在跟你開玩笑。W3C甚至都說，在外邊框中使用負邊距是容許的。要了解更多能夠點擊這篇文章
負邊距不是在hack
這是尤爲正確的。正是由於沒有很好地瞭解負邊距纔是致使各類奇怪的問題。只有在被用來解決其餘地方的bug的時候纔是hack
它符合正常的文檔流
當負邊距使用在沒有浮動的元素上時並不會破壞正常的文檔流。因此付過你使用負邊距把元素向上微調的話，全部後面的元素也會向上微調。
它是至關好的兼容性
負邊距基本上被全部現代的瀏覽器支持（IE6的大部分狀況也是）
當使用了float以後，會有不一樣的表現
負邊距不是你日常使用的屬性，因此使用的時候要格外當心。
Dreamweaver不理解它
負邊距不會在DW的設計窗口展現出效果。那你爲何還用DW的設計窗口查看效果呢？
與其共事

負邊距若是能夠正確的使用的話它的功能是很強大的。有兩種場景負邊距是很重要的。

在static元素中使用負邊距

一個static元素是一個沒有使用過float的元素。上面的圖片展現了一個static的元素使用負邊距以後的狀況。

當一個static元素在top/left使用負邊距時，它把元素向這個特定的方向拉，好比

/* Moves the element 10px upwards */ #mydiv1 {margin-top:-10px;}

可是當你將負邊距設置爲相對bottom/right時，它並不會把元素向下或右拉，相反，它會把後面的元素往裏面拉，從而覆蓋本身。

/*
全部在#mydiv1後面的元素都會向上
移動10px，而#mydiv1一點都不會移動
*/ #mydiv1{margin-bottom:-10px;}

若是寬度沒有設置，左右負邊距會把元素向兩個方向拉以增長寬度。在這裏margin的做用至關於padding
在浮動中使用負邊距

加入下面就是咱們的html代碼：

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

若是對一個浮動的元素使用負邊距，它會產生一個空白，其餘元素就能夠覆蓋這一部分。這個技巧能夠很好地用戶流式佈局。好比有一列寬度100%，另外一列有固定的寬度，好比說100px。

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

若是兩個元素都使用了左浮動而且設置margin-right:-20px。#mydiv2會把#mydiv1當作寬度縮小20px（因此會覆蓋一部分），可是有趣的是#mydiv1並不會有任何變化，而是依然保持原先的寬度。
若是負邊距和寬度同樣大的話，它就會被徹底覆蓋掉。由於外邊距，內邊距，邊框和內容加起來等於元素的寬度。若是負外邊距等於元素的寬度的話，那麼該元素的寬度就會變成0px。
學以至用

既然咱們知道使用負邊距在CSS2中是有效的，使用它能夠給咱們提供一些很是有趣的CSS技巧。

把單個列表變成三列

若是你有一個列表垂直方向太長了，爲何不把它分紅幾列呢？負邊距可讓你在不增長任何浮動和標籤的狀況下完成。你會發現用負邊距實現這個是多麼地簡單，就像下面：

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 */

經過對.top的添加margin-top:-2.6em。全部的元素會完美的對齊好。使用負邊距會比使用相對定位好不少，由於你只須要給新的一列的第一個元素添加負邊距便可。酷吧，哈哈哈

重疊來強調

故意重疊元素也是一種很好地設計隱喻。重疊效果能夠加強深度感從而爲突出特定元素。一個很好地例子就像上圖同樣，經過重疊來吸引注意力。只須要使用z-index屬性和一點小創意你就能夠作到。

驚豔的3D文本效果

這是一個精緻的技巧。經過使用兩個視圖的兩種顏色建立safari同樣有點傾斜的效果。而後經過負邊距來把其中一個疊加到另外一個上面，保持1到2像素的偏移。這樣你就能夠二道可選的，機器友好的傾斜字體。就不須要浪費不少貸款來加載大的圖片來實現這個效果啦

簡單的兩列布局

負邊距也是在流式佈局中建立簡單一列寬度固定，一列內容爲寬度的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;}

哈哈，這樣你就獲得了一個簡單的兩列布局。它也能在IE6完美的渲染出來。如今爲了讓#sidebar不要被#content給掩蓋，只要簡單的加上：

/* Prevent text from being overlapped */ #content p {margin-right:210px;} /* It’s 200px + 10px, the 10px being an additional margin.*/

當適當的使用的時候，負外邊距可以提供一個靈活的文檔結構，完爆table的佈局。靈活的文檔佈局是一種可訪問性和SEO的技巧，經過它可以讓你根據你的關注點以任意順序組織你的html代碼。這裏有一個文章討論了負邊距在多列布局中的應用。

微調元素

這是負外邊距最常也是最簡單的使用方式。假如你把第十個div插入到9個其餘的div中，不知道什麼緣由沒有正確的排列，使用負邊距來調整這個div就不須要改變其餘9個div了，很方便。

解決bug

文本和連接問題

在float中使用負邊距可能會在舊的瀏覽器形成一些問題，好比下面的這些：

讓連接不可點擊
文本變得很難選擇
失去焦點的時候按tab鍵失效

解決方法：只要添加position:relative，就能夠啦。

圖片被剪切啦

若是你運氣很差恰好在辦公室使用IE6，當遇到覆蓋和浮動的時候內容有些時候回忽然被剪切掉。

解決方法：一樣的只要給浮動元素加上position:relative，全部的問題就解決啦。

結論

負外邊距可以在不使用任何額外標籤的狀況下定位元素讓它在如今網頁設計中佔有一席之地。隨着更多的用戶使用更新的瀏覽器（包括IE8)，將來使用這些技巧的網站會變得更加有前景。

轉載：http://segmentfault.com