這篇文章將為大家詳細(xì)講解有關(guān)常用技巧margin負(fù)外邊距的使用方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司專注于阿勒泰網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供阿勒泰營銷型網(wǎng)站建設(shè)，阿勒泰網(wǎng)站制作、阿勒泰網(wǎng)頁設(shè)計(jì)、阿勒泰網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造阿勒泰網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供阿勒泰網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

css中的負(fù)邊距(negative margin)是布局中的一個常用技巧，只要運(yùn)用得合理常常會有意想不到的效果。很多特殊的css布局方法都依賴于負(fù)邊距，所以掌握它的用法對于前端的同學(xué)來說，那是必須的。

負(fù)邊距在普通文檔流中的作用和效果

那些沒有脫離文檔流的元素（指不是浮動元素也不是絕對定位、固定定位的元素等），其在頁面中的位置是跟隨者文檔流的變化而變化的?？聪旅孢@幅圖：

負(fù)邊距對這些由文檔流控制的元素的作用是，會使它們在文檔流中的位置發(fā)生偏移，但這種偏移不同于相對定位，通過相對定位偏移后，其仍然會堅(jiān)守著它原來占據(jù)的空間，不會讓文檔流的其它元素乘虛而入。而通過負(fù)邊距進(jìn)行偏移的元素，它會放棄偏移前占據(jù)的空間，這樣它后面文檔流中的其它元素就會“流”過來填充這部分空間。還是通過例子來說明吧。現(xiàn)在我們把上圖中的塊狀元素、行內(nèi)元素以及inline-block元素都設(shè)一個負(fù)邊距 margin:-10px; 看看會發(fā)生什么：

我們看到，黑灰色的塊狀元素好像向左和向上都分別嵌入了瀏覽器窗口的邊界里10px,然后塊狀元素下面的文字也爬到了它身上，行內(nèi)元素向左移動蓋住了它前面的一個字，它后面的文字也有一部分覆蓋在了它身上，inline-block的位置變化也很明顯。

好了，這點(diǎn)相信大家早就心知肚明了，就是負(fù)的邊距好像能減小元素在文檔流中的尺寸一樣，但事實(shí)上，它的尺寸大小并沒變，只是文檔流在計(jì)算元素位置的時候，會認(rèn)為負(fù)邊距把元素的尺寸減小了，因?yàn)槲恢靡簿桶l(fā)生變化了。這只是打個很形象的比喻，幫助大家理解一下。還要注意的是，文檔流只能是后面的流向前面的，即文檔流只能向左或向上流動，不能向下或向右移動。

所以，一切只要是由文檔流決定的東西，負(fù)邊距就能起作用了。

比如，一個沒有設(shè)定高度的塊狀元素，其高度是自動的，具體來說就是由它里面的文檔流最后的位置決定的。假設(shè)它里面有一個出于文檔流中的子元素，高度為100px;那這時這個父元素的高度就等于子元素的高度100px了，如果子元素繼續(xù)增高，那么父元素也會跟著增高。可是如果這時子元素設(shè)一個負(fù)的margin-bottom,比如-20px，因?yàn)樨?fù)邊距會影響到文檔流，本來文檔流的高度是從父元素的最頂端到子元素的最底端這段高度，現(xiàn)在子元素有一個margin-bottom:-20px;就相當(dāng)于文檔流要向上退后20px,這樣整個文檔流的高度就減少了20px了，那么父元素的高度也會跟著減少20px。在標(biāo)準(zhǔn)瀏覽器中，這還需要父元素?fù)碛幸粋€overflow:hidden的屬性才能辦到，在IE瀏覽器中則不需要。所以以前所說的多列等高布局就是利用這個原理來實(shí)現(xiàn)的。

總之一句話，在文檔流中，元素的最終邊界是由margin決定的，margin為負(fù)的時候就相當(dāng)于元素的邊界向里收，文檔流認(rèn)的只是這個邊界，不會管你實(shí)際的尺寸是多少。

左和右的負(fù)邊距對元素寬度的影響

負(fù)邊距不僅能影響元素在文檔流中的位置，還能增加元素的寬度！

這個作用能實(shí)現(xiàn)的前提是：該元素沒有設(shè)定width屬性（當(dāng)然width:auto是可以的）。

比如下圖的黑灰色部分是一個塊狀元素，它沒有設(shè)定寬度。它被包裹在一個寬度為400px,且水平居中的父元素中。

現(xiàn)在給這個元素的設(shè)一個margin-right:-100px;

我們看到它的寬度的確變長100px;然后再給它設(shè)一個margin-left:-100px;

我們看到它變得更寬了。

負(fù)的margin會改變元素的寬度，這的確很讓人費(fèi)解，如果說負(fù)邊距會改變元素在文檔流中的位置還是很好理解的話，那改變寬度這種現(xiàn)象還真的蠻讓人不可思議的。

那這貨有什么用途呢？我就舉一個例子吧。

想要創(chuàng)建上圖中黑框內(nèi)的幾個元素按順序排下來，中間帶些間隔的布局要怎么做？，當(dāng)然最簡單省事的方法就是利用浮動了。我們把黑框里面的子元素向左浮動，然后設(shè)一個合適的margin-right,是不是就辦到了呢？但因?yàn)橥膺吅诳虻膶挾仁枪潭ǖ?，就是里面四個子元素的寬度加上三列間隔的寬度，所以靠近右邊邊界的子元素就不應(yīng)該有正向的margin-right了，否則這一行就只能容納三個子元素了。有人說那這還不簡單，給靠近右邊界的那些子元素加一個class，把它的margin-right設(shè)為0不就行了。這當(dāng)然可以，但如果這些子元素是在模板中通過循環(huán)動態(tài)輸出的，那在循環(huán)的時候還得判斷哪些子元素是靠近右邊邊界的，如果是就加上一個class。這樣做的話是不是就有點(diǎn)麻煩了？所以解決辦法是加大子元素的父容器的寬度，讓它能夠容納一行中有四個子元素加上四列間隔的寬度，然后最外面的的黑框的那個容器設(shè)一個overflow:hidden就行了。上面說了負(fù)的左右邊距能加大元素的寬度，所以給子元素的父容器設(shè)一個合適的負(fù)的margin-right就可以了。當(dāng)然你也可以直接在css中把子元素的父容器的寬度設(shè)寬一些，舉這個例子只是為了說明負(fù)邊距也是一種方法?？聪峦暾拇a：

代碼如下:

負(fù)邊距對浮動元素的影響

負(fù)邊距對浮動元素的影響與負(fù)邊距對文檔流中元素的影響其實(shí)是差不多的。文檔流中元素的位置由文檔流的走向決定，浮動的元素也可以看成有一個“浮動流”存在，不過浮動流既可以向左，也可以向右。

比如下圖是三個向左浮動的元素，寬高都是100px：

現(xiàn)在把它們都設(shè)一個margin-right:-50px; 然后會變成這樣子：

我們看到后面的元素疊到了前面的元素上。

再看下面的圖：

我們把瀏覽器縮小了，然后因?yàn)閷挾炔粔?，元?掉下來了。我們給元素3設(shè)一個margin-left:-80px;看看會怎么樣

這時我們看到元素3上去了，而且還覆蓋了元素2的一部分。繼續(xù)元素3設(shè)為margin-left:-100px

這時元素3完全覆蓋住了元素2,當(dāng)元素3設(shè)為：margin-left:-200px時：

我們看到元素3繼續(xù)向左移動并覆蓋住了元素1。

現(xiàn)在想必大家都明白了負(fù)邊距對浮動元素位置的影響了吧。所以那些說得很好聽的什么圣杯布局、雙飛翼布局啊什么的，都是利用這個原理實(shí)現(xiàn)的。就是某個元素雖然是寫在了后面，但可以通過負(fù)邊距讓它在瀏覽器顯示的時候是在前面的。這個以后可以再慢慢講。

負(fù)邊距對絕對定位元素的影響

絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就是margin定義的邊界，所以，如果margin為正的時候，那它的邊界是向外擴(kuò)的，如果margin為負(fù)的時候，則它的邊界是向里收的。利用這點(diǎn)，就有了經(jīng)典的利用絕對定位來居中的方法：

看下效果：

但該方法的缺點(diǎn)是必須要知道要居中元素的高度和寬度。

關(guān)于常用技巧margin負(fù)外邊距的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。