成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實用的margin負(fù)值

yanwei / 1758人閱讀

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

無論是在介紹前端知識的書籍還是談?wù)摵心Ｐ偷奈恼?，margin 都是最重要的屬性之一，然而它的負(fù)值用法卻極少被提到。其實 margin 負(fù)值是一個相當(dāng)實用的屬性，可以被應(yīng)用于日常前端開發(fā)當(dāng)中的不少場景。

margin 負(fù)值初體驗

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

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

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

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

在例子當(dāng)中一個大的正方形包裹著兩個分別是藍(lán)色和黃色的正方形，分別對藍(lán)色的正方形使用上、下、左、右四個方向的 margin 負(fù)值。

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

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

原理淺析

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

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

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

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

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

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

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

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

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

margin 負(fù)值在實際當(dāng)中的應(yīng)用

margin 負(fù)值雖然不是常常被提起，但是在實際當(dāng)中已經(jīng)有相當(dāng)廣泛的應(yīng)用?，F(xiàn)在來看幾個實例。

大眾點評團(tuán)購城市列表

http://t.dianping.com/citylist

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

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

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

segmentfault 首頁tab

http://segmentfault.com/

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

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

.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 網(wǎng)格系統(tǒng)

在 Bootstrap 的網(wǎng)格系統(tǒng)當(dāng)中，每一個使用 col-**-* 類的列元素都應(yīng)該包裹在 row 類的元素當(dāng)中。為了使頁面美觀每個 col-**-* 的類都設(shè)置了左、右15個像素的補白 padding，這樣會導(dǎo)致一個結(jié)果，第一個和最后一個元素會離開容器15個像素的距離。為此，Bootstrap在 row 類當(dāng)中分別定義了左、右方向15個像素的 margin 負(fù)值來抵消第一列和最后一列產(chǎn)生的左右補白。

.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 負(fù)值。

直接上例子

最后

利用 margin 負(fù)值可以簡單直接的解決某些我們?nèi)粘ｉ_發(fā)當(dāng)中遇到的問題，margin 負(fù)值還有很多其余的使用實例，這里不一一敘述，只要平時多看看別人寫的代碼，就會發(fā)現(xiàn) margin 負(fù)值的應(yīng)用其實無處不在。

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

參考

由淺入深漫談margin屬性

我知道你不知道的負(fù)Margin

Bootstrap框架的網(wǎng)格系統(tǒng)工作原理

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110970.html

相關(guān)文章

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • CSS實用技巧二

    摘要：在上一篇文章中我們知道可以通過屬性可以實現(xiàn)首行縮進(jìn)兩個字符?，F(xiàn)在我們來講一下第二個技巧。通過設(shè)置來實現(xiàn)針對如果里面是標(biāo)簽的情況下實現(xiàn)更好的優(yōu)化。為了實現(xiàn)更好的我們就可以應(yīng)用這個技巧。可以實現(xiàn)元素的居中。 text-indent 在上一篇文章中我們知道可以通過text-indent: 2rem屬性可以實現(xiàn)首行縮進(jìn)兩個字符。現(xiàn)在我們來講一下第二個技巧。通過設(shè)置text-indent: -9...

    ChristmasBoy 評論0 收藏0

  • css實現(xiàn)居中、自適應(yīng)

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

    陸斌 評論0 收藏0

  • 偏門卻又實用的 CSS 樣式

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

    Michael_Ding 評論0 收藏0

  • 利用HTML和CSS實現(xiàn)常見的布局

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

    daydream 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<