這篇文章主要介紹了CSS布局的實(shí)用小技巧之margin負(fù)值的示例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、企業(yè)網(wǎng)站建設(shè)、成都手機(jī)網(wǎng)站制作、網(wǎng)頁設(shè)計、高端網(wǎng)站設(shè)計、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。成都創(chuàng)新互聯(lián)公司擁有實(shí)力堅強(qiáng)的技術(shù)研發(fā)團(tuán)隊及素養(yǎng)的視覺設(shè)計專才。

負(fù)邊距即margin屬性的值設(shè)為負(fù)值，在CSS布局中時一個很有用的技巧。值為正的場景很常見，大家都很熟悉其表現(xiàn)

• 當(dāng)margin-top、margin-left為負(fù)值的時候，會把元素上移、左移，同時文檔流中的位置也發(fā)生相應(yīng)變化,這點(diǎn)與position:relative的元素設(shè)置top、left后元素還占據(jù)原來位置不同

• 當(dāng)margin-bottom、margin-right設(shè)為負(fù)值的時候，元素本身沒有位置變化，后面的元素會下移、右移

看幾個應(yīng)用場景

絕對定位元素

當(dāng)元素被設(shè)置為絕對定位的時候其top、right、bottom、left值是指離最近的非static元素的距離，經(jīng)典的垂直居中的一種方式正是利用的絕對定位元素的負(fù)邊距實(shí)現(xiàn)的

把元素設(shè)置為絕對定位，然后設(shè)置top和left為50%，這時候元素的上邊、左邊就到了父元素的50%處，再對元素設(shè)置其自身高度、長度一般的負(fù)邊距，使元素中心移動到父元素中心，實(shí)現(xiàn)居中對齊

float元素

負(fù)邊距對float元素的影響也是按照上面說的，不過有其特殊性，我們看個例子就很清楚了

浮動元素負(fù)邊距

在一個寬度為280px的div中右3個float:left的子元素，寬度為100px，由于一排放不下，最后一個陪移動到了下一行

我們對代碼稍作修改

第三個元素添加-20px的負(fù)邊距

這時候發(fā)現(xiàn)第三個元素移上去了，并且覆蓋了第二個元素20px，經(jīng)典的多列布局正是利用此原理

多列布局

Content Content Content Content Content Content Content 
Content Content Content Content Content Content Content Content


Right

代碼很簡單

• 為content元素添加父元素，設(shè)置左浮動，寬度100%

• content元素設(shè)置右邊距，值等于right的寬度

• right左浮動，然后設(shè)置其寬度的負(fù)邊距

本來right應(yīng)該在第二行顯示了，但是其寬度的左浮動使它到了第一行的最右邊，覆蓋了wrap的一部分，但是content有right寬度的右邊距，覆蓋區(qū)域沒有內(nèi)容，這樣就實(shí)現(xiàn)了兩列布局

普通元素

負(fù)邊距對不同塊元素的影響很有意思，我們通過幾個例子來看一下

多列列表

aaa
bbb
ccc
ddd
eee
fff
ggg
hhh
iii

普通的做法我們肯定是通過浮動實(shí)現(xiàn)，通過剛才介紹的知識應(yīng)該不難理解為什么這樣也行?？雌饋碓谄胀ㄔ厣蠜]什么稀奇的

放大元素

什么？負(fù)邊距還可以放大元素?。。?/p>

  

  inner inner inner inner inner inner inner inner inner inner inner inner 
  

這個例子看起來平淡無奇，效果卻很驚人，內(nèi)層的div設(shè)置了水平的負(fù)邊距后竟然變大了

PS. 效果能實(shí)現(xiàn)的前提是元素的寬度不能設(shè)置為auto以外的值

帶有右邊距的浮動子元素列表

看到這種效果你第一想法是什么？會不會是子元素設(shè)置margin-right，在遍歷的時候nth-child(3n)還要設(shè)置為0，看看利用上面知識我們可以怎樣處理

我們沒有設(shè)置nth-child(3n)的邊距為0，而是通過負(fù)邊距使父元素“變大”。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS布局的實(shí)用小技巧之margin負(fù)值的示例內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!