CSS負(fù)邊距的行為表現(xiàn)方法

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

　　CSS 中的負(fù)邊距

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

　　先介紹下我們的測(cè)試元素：一個(gè)簡(jiǎn)單的包含三個(gè)段落的容器元素。注意，段落設(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>

　　效果：

　　負(fù)邊距 margin-top/bottom

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

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

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

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

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

　　邊距合并（Margin collapsing）

　　邊距塌陷行為在負(fù)邊距上的行為是不同的。

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

　　對(duì)正邊距來(lái)說(shuō)，規(guī)則是這樣的：瀏覽器會(huì)比較第一段文本的 margin-bottom 和第二段文本的 margin-top，誰(shuí)的值大，最終間距就是誰(shuí)，以 margin-bottom: 16px 和 margin-top: 4px 為例，那么最終的間距為 16px；而對(duì)存在負(fù)邊距的場(chǎng)景就不是這樣了，像上面一個(gè)是 margin-bottom: 1em（假設(shè)是 16px），一個(gè)是 margin-bottom: -15px，那么按照規(guī)則，最終的間距是 16px - 15px，得 1px，因?yàn)槭钦?，所以表示兩者相離 1px 的距離。

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

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

　　負(fù)邊距 margin-left/right

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

　　可以看見，第一個(gè)段落向左偏移了 10px，寬度沒(méi)有變化，同時(shí)右邊緣也向左移動(dòng)了 10px。

　　第二個(gè)段落的負(fù) margin-right 值沒(méi)有起作用。因?yàn)?margin-right 負(fù)值影響的是第二個(gè)段落右面的元素，當(dāng)前第二個(gè)段落右邊是沒(méi)有元素的，因此看不到效果。

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

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

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

　　同時(shí)，第二個(gè)段落設(shè)置了 margin-top: -10px，于是向上偏移了 10px。第三個(gè)元素設(shè)置了 margin-bottom: -10px，但沒(méi)有效果，是因?yàn)榈撞繘](méi)有元素。

　　注：margin-bottom: -10px 產(chǎn)生了影響，效果沒(méi)有出來(lái)不只是因?yàn)榈撞繘](méi)有元素&mdash;&mdash;我們將第一個(gè)元素刪除，就能看到父元素高度塌陷了，塌陷的高度正好等于第三個(gè)段落元素的負(fù)邊距絕對(duì)值，即 10px（如下圖）。而之前沒(méi)有塌陷的原因是因?yàn)榈谝粋€(gè)元素的高度撐開了父元素，導(dǎo)致父元素高度無(wú)法塌陷。

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

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

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

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

　　width: auto 和 margin-right 負(fù)值

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

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

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

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

　　這里貼出了上面結(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ù)制代碼

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

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