負(fù)的邊距好像能減小元素在文檔流中的尺寸一樣，但事實(shí)上，它的尺寸大小并沒(méi)變，只是文檔流在計(jì)算元素位置的時(shí)候，會(huì)認(rèn)為負(fù)邊距把元素的尺寸減小了，因此位置也就發(fā)生變化了。

實(shí)例：

因?yàn)镻為block元素且沒(méi)有指定width，則p的width+padding+border+margin=父級(jí)div的width（這里都是說(shuō)的水平方向）。這里假定padding,border為0。父級(jí)div的width為400px。p的width為inherit，如果不設(shè)置margin，則p的width為400px。正如text-block。當(dāng)margin-left:-100px;，p.width + (-100px) = 400px。所以p的width就變成了500px。這里說(shuō)的p都是假定為inherit width即沒(méi)有指定確定的width值。相反如果指定了p的width，則margin-left,margin-right為負(fù)值則會(huì)引起的不是p元素的大小，而是會(huì)引起p元素位置的變化。這里和浮動(dòng)元素上應(yīng)用負(fù)的margin-left和margin-right得到的效果是相同的

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

那些沒(méi)有脫離文檔流的元素（指不是浮動(dòng)元素也不是絕對(duì)定位、固定定位的元素等），其在頁(yè)面中的位置是跟隨者文檔流的變化而變化的。看下面這幅圖

負(fù)邊距對(duì)這些由文檔流控制的元素的作用是，會(huì)使它們?cè)谖臋n流中的位置發(fā)生偏移，但這種偏移不同于相對(duì)定位，通過(guò)相對(duì)定位偏移后，其仍然會(huì)堅(jiān)守著它原來(lái)占據(jù)的空間，不會(huì)讓文檔流的其它元素乘虛而入。而通過(guò)負(fù)邊距進(jìn)行偏移的元素，它會(huì)放棄偏移前占據(jù)的空間，這樣它后面文檔流中的其它元素就會(huì)“流”過(guò)來(lái)填充這部分空間

還是通過(guò)例子來(lái)說(shuō)明吧。現(xiàn)在我們把上圖中的塊狀元素、行內(nèi)元素以及inline-block元素都設(shè)一個(gè)負(fù)邊距 margin:-10px; 看看會(huì)發(fā)生什么

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

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

比如，一個(gè)沒(méi)有設(shè)定高度的塊狀元素，其高度是自動(dòng)的，具體來(lái)說(shuō)就是由它里面的文檔流最后的位置決定的。假設(shè)它里面有一個(gè)出于文檔流中的子元素，高度為100px;那這時(shí)這個(gè)父元素的高度就等于子元素的高度100px了，如果子元素繼續(xù)增高，那么父元素也會(huì)跟著增高。可是如果這時(shí)子元素設(shè)一個(gè)負(fù)的margin-bottom,比如-20px，因?yàn)樨?fù)邊距會(huì)影響到文檔流，本來(lái)文檔流的高度是從父元素的最頂端到子元素的最底端這段高度，現(xiàn)在子元素有一個(gè)margin-bottom:-20px;就相當(dāng)于文檔流要向上退后20px,這樣整個(gè)文檔流的高度就減少了20px了，那么父元素的高度也會(huì)跟著減少20px。在IE8+以及那些標(biāo)準(zhǔn)瀏覽器中，這還需要父元素?fù)碛幸粋€(gè)overflow:hidden的屬性，因?yàn)楦冈氐母叨茸兞?#xff0c;但子元素的高度并沒(méi)有變，所以需要使子元素超出隱藏，但即使不設(shè)置overflow:hidden，父元素的高度也是變小了的，只不過(guò)這時(shí)子元素的高度會(huì)超出父元素。在IE6中則不需要，但需要觸發(fā)它的hasLayout屬性。所以以前所說(shuō)的多列等高布局就是利用這個(gè)原理來(lái)實(shí)現(xiàn)的

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

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

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

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

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

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

負(fù)的margin會(huì)改變?cè)氐膶挾?#xff0c;這的確很讓人費(fèi)解，如果說(shuō)負(fù)邊距會(huì)改變?cè)卦谖臋n流中的位置還是很好理解的話，那改變寬度這種現(xiàn)象還真的蠻讓人不可思議的

那這貨有什么用途呢？我就舉一個(gè)例子吧

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

3. 負(fù)邊距對(duì)浮動(dòng)元素的影響

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

比如下圖是三個(gè)向左浮動(dòng)的元素，寬高都是100px

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

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

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

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

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

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

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

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

注1：關(guān)于left的偏移問(wèn)題：

1. 當(dāng)position設(shè)置為absolute或時(shí)fixed， left屬性指定元素的左邊緣和其包含塊的左邊緣之間的距離

2. 當(dāng)position設(shè)置為relative，left屬性指定元素的左邊緣從正常位置向右移動(dòng)的距離

3. 當(dāng)position設(shè)置static，left屬性沒(méi)有影響

注2：關(guān)于left的取值問(wèn)題：

1. 如果是數(shù)值，那么就是指定偏移的固定距離

2. 如果是百分比，那么就是相對(duì)父容器的寬度來(lái)計(jì)算

總結(jié)

以上是生活随笔為你收集整理的CSS布局奇淫巧计之-强大的负边距的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。