自從1998年CSS2作為推薦以來(lái)，表格的使用漸漸退去，成為歷史。正因為此，從那以后CSS布局成為了優(yōu)雅代碼的代名詞。

　　對于所有設計師使用過(guò)的CSS概念，負邊距作為最少討論到的定位方式要記上一功。這就像是在線(xiàn)紋身-每個(gè)人都會(huì )做，但是沒(méi)有人會(huì )談?wù)撍?It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.)

　　為其正名

　　我們都使用過(guò)CSS得外邊距，但是當談到負邊距的時(shí)候，我們好像往差的方向發(fā)展啦。在網(wǎng)頁(yè)設計中負邊距的使用出現了兩種極端，一種特別喜歡它，也有一些人認為這完全就是魔鬼的作品。

　　負邊距的使用如下：

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

　　負邊距通常在小范圍使用。但是接下來(lái)你會(huì )看到，它能做的事情很多。下面是一些你應該知道的關(guān)于負邊距的事情：

　　他們是完全有效的CSS

　　這不是在跟你開(kāi)玩笑。W3C甚至都說(shuō)，在外邊框中使用負邊距是允許的。要了解更多可以點(diǎn)擊這篇文章

　　負邊距不是在hack

　　這是尤其正確的。正是因為沒(méi)有很好地了解負邊距才是導致各種奇怪的問(wèn)題。只有在被用來(lái)解決其他地方的bug的時(shí)候才是hack

　　它符合正常的文檔流

　　當負邊距使用在沒(méi)有浮動(dòng)的元素上時(shí)并不會(huì )破壞正常的文檔流。所以付過(guò)你使用負邊距把元素向上微調的話(huà)，所有后面的元素也會(huì )向上微調。

　　它是相當好的兼容性

　　負邊距基本上被所有現代的瀏覽器支持(IE6的大部分情況也是)

　　當使用了float之后，會(huì )有不同的表現

　　負邊距不是你平常使用的屬性，所以使用的時(shí)候要格外小心。

　　Dreamweaver不理解它

　　負邊距不會(huì )在DW的設計窗口展示出效果。那你為什么還用DW的設計窗口查看效果呢?

　　與其共事

　　負邊距如果可以正確的使用的話(huà)它的功能是很強大的。有兩種場(chǎng)景負邊距是很重要的。

　　在static元素中使用負邊距

　　一個(gè)static元素是一個(gè)沒(méi)有使用過(guò)float的元素。上面的圖片展示了一個(gè)static的元素使用負邊距之后的情況。

　　當一個(gè)static元素在top/left使用負邊距時(shí)，它把元素向這個(gè)特定的方向拉，比如

　　/* Moves the element 10px upwards */

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

　　但是當你將負邊距設置為相對bottom/right時(shí)，它并不會(huì )把元素向下或右拉，相反，它會(huì )把后面的元素往里面拉，從而覆蓋自己。

　　/*

　　所有在#mydiv1后面的元素都會(huì )向上

　　移動(dòng)10px，而#mydiv1一點(diǎn)都不會(huì )移動(dòng)

　　*/

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

　　如果寬度沒(méi)有設置，左右負邊距會(huì )把元素向兩個(gè)方向拉以增加寬度。在這里margin的作用相當于padding

　　在浮動(dòng)中使用負邊距

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

　　First

　　Second

　　如果對一個(gè)浮動(dòng)的元素使用負邊距，它會(huì )產(chǎn)生一個(gè)空白，其他元素就可以覆蓋這一部分。這個(gè)技巧可以很好地用戶(hù)流式布局。比如有一列寬度100%，另一列有固定的寬度，比如說(shuō)100px。

　　/*

　　A negative margin is applied opposite the float

　　*/

　　#mydiv1 {float:left; margin-right:-100px;}

　　如果兩個(gè)元素都使用了左浮動(dòng)并且設置margin-right:-20px。#mydiv2會(huì )把#mydiv1看成寬度縮小20px(所以會(huì )覆蓋一部分)，但是有趣的是#mydiv1并不會(huì )有任何變化，而是依然保持原先的寬度。

　　如果負邊距和寬度一樣大的話(huà)，它就會(huì )被完全覆蓋掉。因為外邊距，內邊距，邊框和內容加起來(lái)等于元素的寬度。如果負外邊距等于元素的寬度的話(huà)，那么該元素的寬度就會(huì )變成0px。

　　學(xué)以致用

　　既然我們知道使用負邊距在CSS2中是有效的，使用它可以給我們提供一些非常有趣的CSS技巧。

　　把單個(gè)列表變成三列

　　如果你有一個(gè)列表垂直方向太長(cháng)了，為什么不把它分成幾列呢?負邊距可以讓你在不增加任何浮動(dòng)和標簽的情況下完成。你會(huì )發(fā)現用負邊距實(shí)現這個(gè)是多么地簡(jiǎn)單，就像下面：

　　HTML

　　Eggs

　　Ham

　　Bread

　　Butter

　　Flour

　　Cream

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

　　通過(guò)對.top的添加margin-top:-2.6em。所有的元素會(huì )完美的對齊好。使用負邊距會(huì )比使用相對定位好很多，因為你只需要給新的一列的第一個(gè)元素添加負邊距即可?？岚?，哈哈哈

　　重疊來(lái)強調

　　故意重疊元素也是一種很好地設計隱喻。重疊效果可以增強深度感從而為突出特定元素。一個(gè)很好地例子就像上圖一樣，通過(guò)重疊來(lái)吸引注意力。只需要使用z-index屬性和一點(diǎn)小創(chuàng )意你就可以做到。

　　驚艷的3D文本效果

　　這是一個(gè)精致的技巧。通過(guò)使用兩個(gè)視圖的兩種顏色創(chuàng )建safari一樣有點(diǎn)傾斜的效果。然后通過(guò)負邊距來(lái)把其中一個(gè)疊加到另一個(gè)上面，保持1到2像素的偏移。這樣你就可以二道可選的，機器友好的傾斜字體。就不需要浪費很多貸款來(lái)加載大的圖片來(lái)實(shí)現這個(gè)效果啦

　　簡(jiǎn)單的兩列布局

　　負邊距也是在流式布局中創(chuàng )建簡(jiǎn)單一列寬度固定，一列內容為寬度的100%的兩列布局的好方法。

　　HTML

　　Main content in here

　　I’m the Sidebar!

　　CSS

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

　　#sidebar {width:200px; float:left;}

　　哈哈，這樣你就得到了一個(gè)簡(jiǎn)單的兩列布局。它也能在IE6完美的渲染出來(lái)?，F在為了讓#sidebar不要被#content給掩蓋，只要簡(jiǎn)單的加上：

　　/* Prevent text from being overlapped */

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

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

　　當適當的使用的時(shí)候，負外邊距能夠提供一個(gè)靈活的文檔結構，完爆table的布局。靈活的文檔布局是一種可訪(fǎng)問(wèn)性和SEO的技巧，通過(guò)它能夠讓你根據你的關(guān)注點(diǎn)以任意順序組織你的html代碼。這里有一個(gè)文章討論了負邊距在多列布局中的應用。

　　微調元素

　　這是負外邊距最常也是最簡(jiǎn)單的使用方式。假如你把第十個(gè)div插入到9個(gè)其他的div中，不知道什么原因沒(méi)有正確的排列，使用負邊距來(lái)調整這個(gè)div就不需要改變其他9個(gè)div了，很方便。