日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
理解并運(yùn)用CSS的負(fù)margin值

本文樣式代碼采用 SCSS。

創(chuàng)新互聯(lián)建站是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十年時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都履帶攪拌車等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致夸獎(jiǎng)。

瀏覽器兼容性為 IE6+。

你的網(wǎng)頁中，不可能沒有使用過 margin。大多數(shù)情況下，我們采用的都是正數(shù)的 margin 值，可能有時(shí)候會(huì)用到負(fù)的 margin 值。在我們的印象中，負(fù)的 margin 值就類似于瀏覽器的 hack 一樣，不被人接受。但是，本文要說明的就是，負(fù)的 margin 值并不是 hack，這是正常范圍內(nèi)的寫法。

Negative values for margin properties are allowed, but there may be implementation-specific limits. —— W3C

根據(jù) W3C，margin 是能夠接受負(fù)值的，只是在具體實(shí)現(xiàn)上有一些區(qū)別。

那么，設(shè)置 margin 為負(fù)值究竟會(huì)是什么樣的效果呢?

與設(shè)置正值不同，margin 設(shè)置負(fù)值需要根據(jù)設(shè)置的方向以及元素是否浮動(dòng)以及其定位方式來判斷最終的行為。

所以，具體行為按照以下幾種情況說明。

***種情況：元素沒有設(shè)置浮動(dòng)且沒有設(shè)置定位或者 position 為 static

如果元素沒有設(shè)置浮動(dòng)并且沒有設(shè)置定位或者 position 屬性為 static 的情況下，對(duì)元素的 margin 設(shè)置負(fù)值會(huì)有以下的效果：

設(shè)置的 margin 的方向?yàn)?top 或者 left

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。

比如，設(shè)置 margin-left: -100px;。 那么，元素會(huì)往左移動(dòng) 100px。對(duì)于設(shè)置 margin-top 也是一樣的道理。

設(shè)置的 margin 的方向?yàn)?bottom 或者 right

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?bottom 或者 right 的時(shí)候，元素本身并不會(huì)移動(dòng)，元素后面的其他元素會(huì)往該元素的方向移動(dòng)相應(yīng)的距離，并且覆蓋在該元素上面。

比如，設(shè)置 margin-right: -100px;。那么，元素本身并不會(huì)移動(dòng)，后面的元素會(huì)向左移動(dòng) 100px 到該元素上。對(duì)于設(shè)置 margin-bottom 也是同樣的道理。

同時(shí)，在元素不指定寬度的情況下，如果設(shè)置 margin-left 或者 margin-right 為負(fù)值的話，會(huì)在元素對(duì)應(yīng)的方向上增加其寬度。效果就和設(shè)置 padding-left 或者 padding-right 一樣。

第二種情況：元素沒有設(shè)置浮動(dòng)且 position 為 relative

如果元素沒有設(shè)置浮動(dòng)，但是設(shè)置了相對(duì)定位，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：

設(shè)置的 margin 的方向?yàn)?top 或者 left

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素也會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。

設(shè)置的 margin 的方向?yàn)?bottom 或者 right

當(dāng)設(shè)置 margin-bottom/left 的時(shí)候，元素本身也不會(huì)移動(dòng)，元素后面的其他元素也會(huì)往該元素的方向移動(dòng)相應(yīng)的距離，但是，該元素會(huì)覆蓋在后面的元素上面 (當(dāng)然，此處說的情況肯定是后面的元素沒有設(shè)置定位以及 z-index 的情況)。

第三種情況：元素沒有設(shè)置浮動(dòng)且 position 為 absolute

如果元素沒有設(shè)置浮動(dòng)，但是設(shè)置了絕對(duì)定位，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：

設(shè)置的 margin 的方向?yàn)?top 或者 left

當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素也會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。

設(shè)置的 margin 的方向?yàn)?bottom 或者 right

由于設(shè)置絕對(duì)定位的元素已經(jīng)脫離了標(biāo)準(zhǔn)文檔流，所以，設(shè)置 margin-right/bottom 對(duì)后面的元素并沒有影響。

第四種情況：元素設(shè)置了浮動(dòng)

肯定沒有既設(shè)置了浮動(dòng)又設(shè)置絕對(duì)定位的情況，那樣太荒唐了。

設(shè)置了浮動(dòng)的元素，再設(shè)置 postion: relative; 的話，元素的行為和單獨(dú)設(shè)置 float 是一樣的。

對(duì)于設(shè)置了浮動(dòng)的元素，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：

如果設(shè)置的 margin 的方向與浮動(dòng)的方向相同，那么，元素會(huì)往對(duì)應(yīng)的方向移動(dòng)對(duì)應(yīng)的距離。

比如：

 
 
    
  
  
  1. .elem { 
    2. 
  
  
  2.  
    3. 
  
  
  3.   float: right; 
    4. 
  
  
  4.  
    5. 
  
  
  5.   margin-right: -100px; 
    6. 
  
  
  6.  
    7. 
  
  
  7. }  
    8.

該元素則會(huì)向右移動(dòng) 100px。

如果設(shè)置 margin 的方向與浮動(dòng)的方向相反，則元素本身不動(dòng)，元素之前或者之后的元素會(huì)向鈣元素的方向移動(dòng)相應(yīng)的距離。

比如：

 
 
    
  
  
  1. .elem { 
    2. 
  
  
  2.  
    3. 
  
  
  3.   float: right; 
    4. 
  
  
  4.  
    5. 
  
  
  5.   margin-left: -100px; 
    6. 
  
  
  6.  
    7. 
  
  
  7. }  
    8.

位于該元素左邊的元素則會(huì)向右移動(dòng) 100px，同時(shí)覆蓋在該元素上。

如果后面的元素也設(shè)置了浮動(dòng)的話，我們以一個(gè)具體的例子來說明。

 
 
    
  
  
  1.  
    2. 
  
  
  2.     
 
  •     
    •  
  •    
     
 
      
  
  
    1. .container { 
      2. 
  
  
    2.     min-height: 300px; 
      3. 
  
  
    3.     margin: 30px auto; 
      4. 
  
  
    4.     overflow: hidden; 
      5. 
  
  
    5.     border: 1px solid #000000; 
      6. 
  
  
    6.     
      7. 
  
  
    7.     .left { 
      8. 
  
  
    8.         float: left; 
      9. 
  
  
    9.         width: 400px; 
      10. 
  
  
    10.         height: 200px; 
      11. 
  
  
    11.         margin-right: -300px; 
      12. 
  
  
    12.         background: purple; 
      13. 
  
  
    13.     } 
      14. 
  
  
    14.      
      15. 
  
  
    15.     .right { 
      16. 
  
  
    16.         float: left; 
      17. 
  
  
    17.         width: 300px; 
      18. 
  
  
    18.         height: 200px; 
      19. 
  
  
    19.         background: #cccccc; 
      20. 
  
  
    20.     } 
      21. 
  
  
    21. }  
      22.

    .left 和 .right 都設(shè)置了浮動(dòng)，在 .left 上設(shè)置了 margin-right: -300px;，那么，.right 會(huì)向左移動(dòng) 300px，從而覆蓋在.left 上。這種行為與沒有既沒有設(shè)置浮動(dòng)也沒有設(shè)置定位的表現(xiàn)類似。

    到此，我們把設(shè)置負(fù) margin 的各種情況以及在各種情況下的表現(xiàn)都大概了解了一遍。那么，我們真正運(yùn)用到實(shí)際中會(huì)是什么樣子呢。

    半遮擋的標(biāo)題

    原諒我措辭不好，大概就是下圖的效果：

    按照一般的思想，肯定是直接給 title 設(shè)置絕對(duì)定位，然后再將其調(diào)整過去。

    但是，按照我們現(xiàn)在所說的，其實(shí)很簡(jiǎn)單就能實(shí)現(xiàn)這個(gè)效果。

    這里只寫了主要部分的代碼。 

     
 
      
  
  
    1. Hey This is title!
     
  •  
  • Hah! This is content.
    •    
     
 
      
  
  
    1. .title { 
      2. 
  
  
    2.     position: relative; 
      3. 
  
  
    3.     width: 200px; 
      4. 
  
  
    4.     height: 60px; 
      5. 
  
  
    5.     margin-bottom: -30px; 
      6. 
  
  
    6.     margin-left: -20px; 
      7. 
  
  
    7.     background: #000000; 
      8. 
  
  
    8. } 
      9. 
  
  
    9.  
      10. 
  
  
    10. .content { 
      11. 
  
  
    11.     max-width: 800px; 
      12. 
  
  
    12.     height: 400px; 
      13. 
  
  
    13.     padding: 0 50px; 
      14. 
  
  
    14.     background: yellow; 
      15. 
  
  
    15. }  
      16.

    我們?yōu)?title 設(shè)置了兩個(gè) margin 的負(fù)值，分別是 margin-bottom: -30px;，以及 margin-left: -20px;。

    設(shè)置 margin-bottom 是為了讓 content 向上移動(dòng)，設(shè)置 margin-left 是為了讓 title 向左移動(dòng)一小段距離。

    還有個(gè)需要注意的地方就是，需要給 title 設(shè)置 position: relative;，根據(jù)我們的第二種情況所說的，這樣，才能保證 title 覆蓋在 content 之上。

    簡(jiǎn)單的一列定寬的兩列流式布局

    根據(jù)我們的***一種情況，通過設(shè)置 margin 為負(fù)值，我們可以很容易的實(shí)現(xiàn)一列定寬的兩列流式布局。

     
 
      
  
  
    1.  
      2. 
  
  
    2.  
      3.
     
  •  
    •  
  •  
  •    
     
 
      
  
  
    1. .left { 
      2. 
  
  
    2.     float: left; 
      3. 
  
  
    3.     width: 100%; 
      4. 
  
  
    4.     height: 200px; 
      5. 
  
  
    5.     margin-right: -300px; 
      6. 
  
  
    6.     background: purple; 
      7. 
  
  
    7. } 
      8. 
  
  
    8. .right { 
      9. 
  
  
    9.     float: left; 
      10. 
  
  
    10.     width: 300px; 
      11. 
  
  
    11.     height: 200px; 
      12. 
  
  
    12.     background: #cccccc; 
      13. 
  
  
    13. }  
      14.

    唯一需要注意的地方就是設(shè)置了 100% 寬度的元素上的 margin 負(fù)值的絕對(duì)值一定要和定寬的元素的寬度相同。

    兩邊固定，中間自適應(yīng)的三列布局

    這是一個(gè)很老的話題了，以前也有各種實(shí)現(xiàn)的方式，比如雙飛翼布局，或者圣杯布局。

    我們此處就以雙飛翼布局來作示例。

    先設(shè)置頁面結(jié)構(gòu)：

     
 
      
  
  
    1.  
      2. 
  
  
    2.  
      3.
     
  •  
    •  
  •  
    •  
  •  
  •   

    此處我們沒有把 center 放在中間，具體原因后面會(huì)解釋。

    然后，我們?cè)O(shè)置這三列都浮動(dòng)：

     
 
      
  
  
    1. .left, 
      2. 
  
  
    2. .right, 
      3. 
  
  
    3. .center { 
      4. 
  
  
    4.     float: left; 
      5. 
  
  
    5.     height: 500px; 
      6. 
  
  
    6. }  
      7.

    同時(shí)為他們指定寬度：

     
 
      
  
  
    1. .left { 
      2. 
  
  
    2.     width: 300px; 
      3. 
  
  
    3.     background: #000000; 
      4. 
  
  
    4. } 
      5. 
  
  
    5.  
      6. 
  
  
    6. .right { 
      7. 
  
  
    7.     width: 400px; 
      8. 
  
  
    8.     background: #00FFFF; 
      9. 
  
  
    9. } 
      10. 
  
  
    10.  
      11. 
  
  
    11. .center { 
      12. 
  
  
    12.     width: 100%; 
      13. 
  
  
    13.     background: #93c759; 
      14. 
  
  
    14. }  
      15.

    現(xiàn)在我們要讓 left 在左邊，相當(dāng)于就是讓它覆蓋在 center 的上面，所以，只需要這樣一句：

     
 
      
  
  
    1. margin-left: -100%; 
      2.

    同時(shí)，要讓 right 在右邊，同理，這樣設(shè)置：

     
 
      
  
  
    1. margin-left: -400px; 
      2.

    注意，此處的 margin 值的絕對(duì)值與 right 的寬度值相同。

    其實(shí)，這樣設(shè)置，我們的三列布局就基本完成了。

    那么，我們?yōu)槭裁匆?center 放在 left 和 right 之前呢?

    這個(gè)其實(shí)涉及到元素的堆疊順序的知識(shí) (這里就不詳細(xì)講解了，后面有時(shí)間的話專門拿一篇文章來講解吧)，此處簡(jiǎn)單說明一下。

    由于我們的三列都設(shè)置了浮動(dòng)，所以，從某種意義上說，它們?nèi)齻€(gè)是在同一個(gè)平面的 (相當(dāng)于 z-index 相同)，那么，這里就不能根據(jù) CSS 來判斷堆疊順序了。所以，此處的 HTML 結(jié)構(gòu)就決定了它們的堆疊順序：所謂后來居上。

    我們要讓 left 在 center 之上，所以，肯定需要讓 left 元素放在 center 之前。

    所以，三列布局完整的 SCSS 代碼如下：

     
 
      
  
  
    1. .container { 
      2. 
  
  
    2.     overflow: hidden; 
      3. 
  
  
    3.      
      4. 
  
  
    4.     .left, 
      5. 
  
  
    5.     .right, 
      6. 
  
  
    6.     .center { 
      7. 
  
  
    7.         float: left; 
      8. 
  
  
    8.         height: 500px; 
      9. 
  
  
    9.     } 
      10. 
  
  
    10.      
      11. 
  
  
    11.     .left { 
      12. 
  
  
    12.         width: 300px; 
      13. 
  
  
    13.         margin-left: -100%; 
      14. 
  
  
    14.         background: #000000; 
      15. 
  
  
    15.     } 
      16. 
  
  
    16.      
      17. 
  
  
    17.     .right { 
      18. 
  
  
    18.         width: 400px; 
      19. 
  
  
    19.         margin-left: -400px; 
      20. 
  
  
    20.         background: #00FFFF; 
      21. 
  
  
    21.     } 
      22. 
  
  
    22.      
      23. 
  
  
    23.     .center { 
      24. 
  
  
    24.         width: 100%; 
      25. 
  
  
    25.         background: #93c759; 
      26. 
  
  
    26.     } 
      27. 
  
  
    27. }  
      28.

    References

    margin-properties | W3C

    The Definitive Guide to Using Negative Margins

    雙飛翼布局和圣杯布局的對(duì)比


    文章標(biāo)題：理解并運(yùn)用CSS的負(fù)margin值
    瀏覽路徑：http://www.dlmjj.cn/article/cciccco.html

    其他資訊