實用的margin負值

yanwei 發布于2019-08-28 18:02 / 1746人閱讀

摘要：下和右方的負值使該元素下方右方的元素被拉向該元素。這里引用懌飛博客由淺入深漫談屬性中參考線的概念。負值在實際當中的應用負值雖然不是常常被提起，但是在實際當中已經有相當廣泛的應用。

無論是在介紹前端知識的書籍還是談論盒模型的文章，margin 都是最重要的屬性之一，然而它的負值用法卻極少被提到。其實 margin 負值是一個相當實用的屬性，可以被應用于日常前端開發當中的不少場景。

margin 負值初體驗

與正值的 margin 一樣，margin 的負值同樣可以被用于上下左右四個方向，我把它所起到的效果總結為：

上和左方的 margin 負值使該元素向上和左方向移動。

下和右方的 margin 負值使該元素下方、右方的元素被拉向該元素。

我們通過幾個簡單的小例子去理解。傳送門......

在例子當中一個大的正方形包裹著兩個分別是藍色和黃色的正方形，分別對藍色的正方形使用上、下、左、右四個方向的 margin 負值。

結果我們可以看到，使用margin-top: -50px 和 margin-left: -50px 的例子，藍色正方形分別向上方和左方移動了50個像素。

而使用 margin-bottom: -50px 和 margin-right: -50px 的例子，位于下方和右方的黃色正方形向藍色正方形方向移動了50個像素，覆蓋了藍色正方形的一部分。

原理淺析

產生上述兩種情況的差異是由于 margin 在上、左方和下、右方解析邏輯有所不同。這里引用懌飛博客《由淺入深漫談margin屬性》 中參考線的概念。

簡單來說就是上、左方和下、右方參考線的不同導致的。

margin 上方負值以包含塊(Containing block) 內容區域的上邊或者上方相連元素 margin 的下邊為參考線

margin 左方負值以包含塊(Containing block) 內容區域的左邊或者左方相連元素 margin 的右邊為參考線

margin 下方負值以元素本身 border 的下邊為參考線

margin 右方負值以元素本身 border 的右邊為參考線

所以使用 margin 上、左方負值時可以理解為與參考線的距離減少，導致元素產生位移；使用使用 margin 下、右方負值時可以理解為參考線向上、右方移動。

深入理解可以看《由淺入深漫談margin屬性》。另外，關于包含塊( Containing block )。

margin 負值在實際當中的應用

margin 負值雖然不是常常被提起，但是在實際當中已經有相當廣泛的應用。現在來看幾個實例。

大眾點評團購城市列表

http://t.dianping.com/citylist

上圖每一個城市之間都有一條淺灰色豎線作為分割符，查看源碼我們可以發現它其實是每個li元素的左邊界，然而通常使用border來完成類似需求時我們不希望第一個（或最后一個）li 元素出現border，因此我們通常會在第一個（或最后一個）li 元素添加 frist-item(或 last-item) 的 class 使他們不顯示，而這里的城市列表用了一個更加簡單的方法：每一個li 元素添加一個像素左方向的 margin 負值。

.list li .cityes li {
    border-left: 1px solid #ccc;
    margin: 17px 0 0 -1px;
    /* 省略其余代碼 */
}

第一個城市的左方 border 就這樣被隱藏了。

segmentfault 首頁tab

http://segmentfault.com/

完成類似的tab效果，我們需要分別給各個 tab 元素和其父元素添加 border，這個時候會出現雙邊框的情況。segmentfault 的解決方法是給每一個tab元素添加一像素下方的 margin 負值。

另外，為了類似上一個例子中的城市列表，這里的元素添加了一個像素的右方的 margin 負值，tab 元素之間不會出現雙邊框的情況。

.nav-tabs {
    border-bottom: 1px solid #ffffd;
    /* 父元素ul */
}
.nav-tabs > li {
    margin-bottom: -1px;
    /* 省略其余代碼 */
}
.nav-tabs-zen > li > a {
    margin-right： 1px;
    border: 1px solid #ffffd;
    /* 省略其余代碼 */
}

Bootstrap 網格系統

在 Bootstrap 的網格系統當中，每一個使用 col-**-* 類的列元素都應該包裹在 row 類的元素當中。為了使頁面美觀每個 col-**-* 的類都設置了左、右15個像素的補白 padding，這樣會導致一個結果，第一個和最后一個元素會離開容器15個像素的距離。為此，Bootstrap在 row 類當中分別定義了左、右方向15個像素的 margin 負值來抵消第一列和最后一列產生的左右補白。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

左右并排布局

在做左右并排布局時候，除了可以使用 float 或者 inline-block 之外，還可以嘗試使用 margin 負值。

直接上例子

最后

利用 margin 負值可以簡單直接的解決某些我們日常開發當中遇到的問題，margin 負值還有很多其余的使用實例，這里不一一敘述，只要平時多看看別人寫的代碼，就會發現 margin 負值的應用其實無處不在。

感謝您的閱讀，有不足之處請在評論為我指出。

參考

由淺入深漫談margin屬性

我知道你不知道的負Margin

Bootstrap框架的網格系統工作原理

本文同步于我的個人博客 http://blog.acwong.org/2014/12/06/negative-margins/

GPU云服務器云服務器負值 margin: margins margin

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110970.html

CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
CSS實用技巧二

摘要：在上一篇文章中我們知道可以通過屬性可以實現首行縮進兩個字符。現在我們來講一下第二個技巧。通過設置來實現針對如果里面是標簽的情況下實現更好的優化。為了實現更好的我們就可以應用這個技巧。可以實現元素的居中。 text-indent 在上一篇文章中我們知道可以通過text-indent: 2rem屬性可以實現首行縮進兩個字符。現在我們來講一下第二個技巧。通過設置text-indent: -9...

ChristmasBoy 2019-08-30 13:11 評論0 收藏0
css實現居中、自適應

摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。單列布局水平居中水平居中的頁面布局中最為常見的一種布局形式，多出現于標題，以及內容區域的組織形式，下面介紹四種實現水平居中的方法（注：下面各個實例中實現的是child元素的對齊操作，c...

陸斌 2019-08-29 16:15 評論0 收藏0
偏門卻又實用的 CSS 樣式

摘要：實現不換行自動換行強制換行不換行自動換行強制換行常用的選擇器以下代碼是選擇父類下第一個子節點，元素，建議學習這個樣式屬性的使用，很實用的。不允許負值用百分比指定起止色位置。::-Webkit-Input-Placeholder input 的 H5?placeholder?屬性，很好用，但不能直接改這個文字顏色，所以目前的解決方法就是用::input-placeholder屬性來改。配合 ...

Michael_Ding 2019-04-23 11:55 評論0 收藏0
利用HTML和CSS實現常見的布局

摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。單列布局水平居中水平居中的頁面布局中最為常見的一種布局形式，多出現于標題，以及內容區域的組織形式，下面介紹四種實現水平居中的方法（注：下面各個實例中實現的是child元素的對齊操作，...

daydream 2019-08-28 18:21 評論0 收藏0