這篇文章主要講解了“CSS負邊距的行為表現(xiàn)方法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS負邊距的行為表現(xiàn)方法”吧！

創(chuàng)新互聯(lián)公司是一家集成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站制作公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅持講誠信，負責(zé)任的原則，為您進行細心、貼心、認真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

CSS 中的負邊距

margin 是可以設(shè)置為負值的，這會幫你實現(xiàn)靠近頂部/左邊相鄰元素的效果，或者實現(xiàn)靠近底部/右邊相鄰元素的效果。

先介紹下我們的測試元素：一個簡單的包含三個段落的容器元素。注意，段落設(shè)置了固定寬度 250px。

<div class="test-container"> <p>First paragraph with a bit of text in it to provide some content.</p> <p>Second paragraph with a bit of text in it to provide some content.</p> <p>Third paragraph with a bit of text in it to provide some content.</p>

</div>

<style>

* { box-sizing: border-box; }

.container {

border: 5px double;

width: 300px;

padding: 0 10px;

}

.container p {

border: 1px solid;

width: 250px;

}

</style>

效果：

負邊距 margin-top/bottom

先給第一段文本 margin-bottom: -15px，結(jié)果第二段文本的經(jīng)瀏覽器重新計算，向上提升了 15px。

第二段文本作為鄰居緊跟在第一段文本后面，第二段文本和第三段文本之間的間距沒有變化，整體依舊是垂直布局。

這個技巧比較適合用來微調(diào)位置，如果一個元素想要輕微的蓋住前面一個元素的話，可以使用它。

現(xiàn)在恢復(fù)布局，給第二段文本 margin-top: -15px 看看效果。

可以看見，跟在第一段文本使用 margin-bottom: -15px 的效果一樣。第二段文本在此被向上提升了 15px。通過在瀏覽器控制臺查看，第一段文本的 margin-bottom 仍是默認的 1rem。

邊距合并（Margin collapsing）

邊距塌陷行為在負邊距上的行為是不同的。

針對負邊距場景：如果相鄰兩元素中一個是正邊距，一個負邊距，則 相鄰間距（adjoining margin）= 正邊距 - 負邊距絕對值（結(jié)果兩元素相交和相離，取決于誰的絕對值更大）；如果相鄰兩元素中沒有正邊距，則 相鄰邊距 = 0 - 邊距 1 絕對值 - 邊距 2 絕對值（結(jié)果兩元素相交）。

對正邊距來說，規(guī)則是這樣的：瀏覽器會比較第一段文本的 margin-bottom 和第二段文本的 margin-top，誰的值大，最終間距就是誰，以 margin-bottom: 16px 和 margin-top: 4px 為例，那么最終的間距為 16px；而對存在負邊距的場景就不是這樣了，像上面一個是 margin-bottom: 1em（假設(shè)是 16px），一個是 margin-bottom: -15px，那么按照規(guī)則，最終的間距是 16px - 15px，得 1px，因為是正值，所以表示兩者相離 1px 的距離。

可以看見，我們可以使用負邊距達到兩元素相互靠近的布局，而不會受到邊距合并的影響。

到這里，算是介紹完負邊距 margin-top/bottom 的情況了。

負邊距 margin-left/right

負邊距 margin-left/right 的工作方式與 margin-top/left 一樣，元素還是有一個固定寬度。下面分別給第一和第二個文本段落設(shè)置 margin-left: -10px 和 margin-right: -10px。

可以看見，第一個段落向左偏移了 10px，寬度沒有變化，同時右邊緣也向左移動了 10px。

第二個段落的負 margin-right 值沒有起作用。因為 margin-right 負值影響的是第二個段落右面的元素，當前第二個段落右邊是沒有元素的，因此看不到效果。

為了展示 margin-right 負值效果，需要將段落元素設(shè)置成浮動的，這樣就有右邊的相鄰元素了。

現(xiàn)在在段落上設(shè)置負邊距。

可以看見，因為第一個段落設(shè)置了 margin-right: -10px，導(dǎo)致第二個段落向左偏移 10px。這跟之前看到的 margin-bottom 負值的效果是一樣的。

同時，第二個段落設(shè)置了 margin-top: -10px，于是向上偏移了 10px。第三個元素設(shè)置了 margin-bottom: -10px，但沒有效果，是因為底部沒有元素。

注：margin-bottom: -10px 產(chǎn)生了影響，效果沒有出來不只是因為底部沒有元素&mdash;&mdash;我們將第一個元素刪除，就能看到父元素高度塌陷了，塌陷的高度正好等于第三個段落元素的負邊距絕對值，即 10px（如下圖）。而之前沒有塌陷的原因是因為第一個元素的高度撐開了父元素，導(dǎo)致父元素高度無法塌陷。

<figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">GIF.gif</figcaption>

需要注意的是，邊距合并只適用于 margin-top 和 margin-bottom 屬性，不對 margin-left、margin-right 起作用，所以不用擔(dān)心這里的左右邊距的合并問題。

如果，我們只是給第二個段落設(shè)置 margin-left: -10px，能看到同樣的效果。

可以看見，在元素固寬情況下，margin-left、margin-right 負值的行為表現(xiàn)跟 margin-top 和 margin-bottom 負值的行為表現(xiàn)是一樣的。

width: auto 和 margin-right 負值

現(xiàn)在不為段落設(shè)置固定寬度，而是讓它們使用默認的 width: auto 設(shè)置觀察 margin-right 的負值行為表現(xiàn)。默認情況下，width: auto 段落元素默認會充滿在父元素寬度，同時受限于父元素的 padding。

現(xiàn)在分別給第一和第二個段落設(shè)置 margin-left: -10px 和 margin-right: -10px，第三個元素同時設(shè)置 margin-left: -10px、margin-right: -10px 查看效果。注意，為了方便對照，這里加入了一個參考元素（Reference paragraph）：

觀察發(fā)現(xiàn)：第一個段落向左偏移了 10px，寬度增加了，右邊緣未受到影響，位置未變；第二個段落向右偏移了 10px，寬度增加了，左邊緣未受到影響，位置未變。這種情況，只在 width: auto 下發(fā)生，這與固定寬度的元素表現(xiàn)是不一樣的。

第三個段落的左右兩端都使用負邊距值，導(dǎo)致左右都向外延伸了 10px 的距離，正好抵消了容器元素左右 10px 的 padding。這是負邊距最常用的應(yīng)用場景&mdash;&mdash;為了讓內(nèi)容與容器間保持一定的留白間隙，容器設(shè)置了 padding，但是內(nèi)容里的一個標題需要延伸到整個容器的寬度展示（不畏外部 padding 值），這就到使用負邊距的時候了。

這里貼出了上面結(jié)構(gòu)的樣式（容器元素設(shè)置了 padding: 10px）。

h6 { margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; /* no width, so defaults to width: auto */ }復(fù)制代碼

再一次要說明的是，這只在標題元素 width: auto 的情況下才能生效，不過這已經(jīng)覆蓋 99% 的實際使用場景了。

感謝各位的閱讀，以上就是“CSS負邊距的行為表現(xiàn)方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS負邊距的行為表現(xiàn)方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章題目：CSS負邊距的行為表現(xiàn)方法
標題URL：http://chinadenli.net/article4/giseoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、小程序開發(fā)、移動網(wǎng)站建設(shè)、做網(wǎng)站、商城網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)