大家好，我是易學前端筆記，今天給大家分享的內容css負邊距之詳解
也希望本次更新對你有所幫助，有效幫助你學習提升，好了，直接開始更新！
對於所有設計師使用過的CSS概念，負邊距作為最少討論到的定位方式要記上一功。這就像是在線紋身-每個人都會做，但是沒有人會談論它。
為其正名
我們都使用過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代碼：
FirstSecond
如果對一個浮動的元素使用負邊距，它會產生一個空白，其他元素就可以覆蓋這一部分。這個技巧可以很好地用戶流式佈局。比如有一列寬度100%，另一列有固定的寬度，比如說100px。
/*
A negative margin is applied opposite the float
*/
#mydiv1 {float:left; margin-right:-100px;}
如果兩個元素都使用了左浮動並且設置margin-right:-20px。#mydiv2會把#mydiv1看成寬度縮小20px（所以會覆蓋一部分），但是有趣的是#mydiv1並不會有任何變化，而是依然保持原先的寬度。
如果負邊距和寬度一樣大的話，它就會被完全覆蓋掉。因為外邊距，內邊距，邊框和內容加起來等於元素的寬度。如果負外邊距等於元素的寬度的話，那麼該元素的寬度就會變成0px。
web前端學習群：4980 48138
學以致用
既然我們知道使用負邊距在CSS2中是有效的，使用它可以給我們提供一些非常有趣的CSS技巧。
把單個列表變成三列
如果你有一個列表垂直方向太長了，為什麼不把它分成幾列呢？負邊距可以讓你在不增加任何浮動和標籤的情況下完成。你會發現用負邊距實現這個是多麼地簡單，就像下面：
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 */
這是一個精緻的技巧。通過使用兩個視圖的兩種顏色創建safari一樣有點傾斜的效果。然後通過負邊距來把其中一個疊加到另一個上面，保持1到2像素的偏移。這樣你就可以二道可選的，機器友好的傾斜字體。就不需要浪費很多貸款來加載大的圖片來實現這個效果啦
簡單的兩列布局
負邊距也是在流式佈局中創建簡單一列寬度固定，一列內容為寬度的100%的兩列布局的好方法。
HTML
Main content in here
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了，很方便。
好了，今天的內容就分享到這裡，如果覺得本文對你有所幫助，歡迎關注和分享，幫助到更多正在學習前端的小夥伴吧！
閱讀更多 易學前端筆記 的文章
