web前端入門到實戰(zhàn)：CSS 負(fù)邊距的行為表現(xiàn)

1、web前端入門到實戰(zhàn)：css 負(fù)邊距的行為表現(xiàn)css 中的負(fù)邊距margin 是可以設(shè)置為負(fù)值的，這會幫你實現(xiàn)逼近頂部/左邊相鄰元素的效果，或者實現(xiàn)逼近底部/右邊相鄰元素的效果。先介紹下我們的測試元素：一個容易的包含三個段落的容器元素。注重，段落設(shè)置了固定寬度 250px。 first paragraph with a bit of text in it to provide some content. second paragraph with a bit of text in it to provide some content. third paragraph with a bit of

2、 text in it to provide some content. * box-sizing: border-box; .container border: 5px double;width: 300px;padding: 0 10px;.container p border: 1px solid;width: 250px;效果：負(fù)邊距 margin-top/bottom先給第一段文本 margin-bottom: -15px，結(jié)果其次段文本的經(jīng)掃瞄器重新計算，向上提升了 15px。其次段文本作為街坊緊跟在第一段文本后面，其次段文本和第三段文本之間的間距沒有變幻，整體依然是垂直布局。這個

3、技巧比較適合用來微調(diào)位置，假如一個元素想要輕微的蓋住前面一個元素的話，可以用法它?，F(xiàn)在復(fù)原布局，給其次段文本 margin-top: -15px 看看效果?？梢钥匆?，跟在第一段文本用法 margin-bottom: -15px 的效果一樣。其次段文本在此被向上提升了 15px。通過在掃瞄器控制臺查看，第一段文本的 margin-bottom 仍是默認(rèn)的 1rem。邊距合并（margin collapsing）邊距塌陷行為在負(fù)邊距上的行為是不同的。針對負(fù)邊距場景：假如相鄰兩元素中一個是正邊距，一個負(fù)邊距，則 相鄰間距（adjoining margin）= 正邊距 - 負(fù)邊距肯定值（結(jié)果兩元素相交

4、和相離，取決于誰的肯定值更大）；假如相鄰兩元素中沒有正邊距，則 相鄰邊距 = 0 - 邊距 1 肯定值 - 邊距 2 肯定值（結(jié)果兩元素相交）。對正邊距來說，規(guī)章是這樣的：掃瞄器會比較第一段文本的 margin-bottom 和其次段文本的 margin-top，誰的值大，終于間距就是誰，以 margin-bottom: 16px 和 margin-top: 4px 為例，那么終于的間距為 16px；而對存在負(fù)邊距的場景就不是這樣了，像上面一個是 margin-bottom: 1em（假設(shè)是 16px），一個是 margin-bottom: -15px，那么根據(jù)規(guī)章，終于的間距是 16px -

5、 15px，得 1px，由于是正當(dāng)，所以表示兩者相離 1px 的距離?？梢钥匆姡覀兛梢杂梅ㄘ?fù)邊距達(dá)到兩元素互相逼近的布局，而不會受到邊距合并的影響。到這里，算是介紹完負(fù)邊距 margin-top/bottom 的狀況了。負(fù)邊距 margin-left/right負(fù)邊距 margin-left/right 的工作方式與 margin-top/left 一樣，元素還是有一個固定寬度。下面分離給第一和其次個文本段落設(shè)置 margin-left: -10px 和 margin-right: -10px?？梢钥匆姡谝粋€段落向左偏移了 10px，寬度沒有變幻，同時右邊緣也向左移動了 10px。其次個段

6、落的負(fù) margin-right 值沒有起作用。由于 margin-right 負(fù)值影響的是其次個段落右面的元素，當(dāng)前其次個段落右邊是沒有元素的，因此看不到效果。為了展示 margin-right 負(fù)值效果，需要將段落元素設(shè)置成浮動的，這樣就有右邊的相鄰元素了?，F(xiàn)在在段落上設(shè)置負(fù)邊距?？梢钥匆姡捎诘谝粋€段落設(shè)置了 margin-right: -10px，導(dǎo)致其次個段落向左偏移 10px。這跟之前看到的 margin-bottom 負(fù)值的效果是一樣的。同時，其次個段落設(shè)置了 margin-top: -10px，于是向上偏移了 10px。第三個元素設(shè)置了 margin-bottom: -10px

7、，但沒有效果，是由于底部沒有元素。注：margin-bottom: -10px 產(chǎn)生了影響，效果沒有出來不只是由于底部沒有元素——我們將第一個元素刪除，就能看到父元素高度塌陷了，塌陷的高度正巧等于第三個段落元素的負(fù)邊距肯定值，即 10px（如下圖）。而之前沒有塌陷的緣由是由于第一個元素的高度撐開了父元素，導(dǎo)致父元素高度無法塌陷。gif.gif需要注重的是，邊距合并只適用于 margin-top 和 margin-bottom 屬性，不對 margin-left、margin-right 起作用，所以不用不安這里的左右邊距的合并問題。假如，我們只是給其次個

8、段落設(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)會彌漫在父元素寬度，同時受限于父元素的 padding?，F(xiàn)在分離給第一和其次個段落設(shè)置 margin-left: -10px 和

9、margin-right: -10px，第三個元素同時設(shè)置 margin-left: -10px、margin-right: -10px 查看效果。注重，為了便利對比，這里加入了一個參考元素（reference paragraph）：觀看發(fā)覺：第一個段落向左偏移了 10px，寬度增強(qiáng)了，右邊緣未受到影響，位置未變；其次個段落向右偏移了 10px，寬度增強(qiáng)了，左邊緣未受到影響，位置未變。這種狀況，只在 width: auto 下發(fā)生，這與固定寬度的元素表現(xiàn)是不一樣的。第三個段落的左右兩端都用法負(fù)邊距值，導(dǎo)致左右都向外延長了 10px 的距離，正巧抵消了容器元素左右 10px 的 padding。

10、這是負(fù)邊距最常用的應(yīng)用場景——為了讓內(nèi)容與容器間保持一定的留白間隙，容器設(shè)置了 padding，但是內(nèi)容里的一個標(biāo)題需要延長到囫圇容器的寬度展示（不畏外部 padding 值），這就到用法負(fù)邊距的時候了。這里貼出了上面結(jié)構(gòu)的樣式（容器元素設(shè)置了 padding: 10px）。h5 margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; /* no width, so def