margin系列之內(nèi)秀篇（二）

原作者：doyoe
原文鏈接：http://blog.doyoe.com/2013/12/14/css/margin%E7%B3%BB%E5%88%97%E4%B9%8B%E5%86%85%E7%A7%80%E7%AF%87%EF%BC%88%E4%BA%8C%EF%BC%89/

可挖掘性

之前已經(jīng)寫過一篇關于 margin 應用場景的文章：margin系列之內(nèi)秀篇，當然，它的應用場景會遠大于文中所述，無法一一列舉。

所以本篇權當是對此的補遺好了，各位客官如有比較Cool的想法都可以留言給我，我會視情況補丁進來。

1像素圓角

這有什么好聊的嗎？border-radius 瞬間可將之秒殺。恩，有的時候你不得不承認CSS3真是一把大殺器。不過當年我們是怎么做的？（會暴露年齡么？）

先看看我們要做什么,圖一：
（圖一）

如上圖一，我們會這樣寫：

HTML

<div id="demo">
    <a href="?"><span>1px圓角</span></a>
    <a href="?"><span>確定</span></a>
    <a href="?"><span>取消</span></a>
</div>

CSS

#demo a,#demo span{
    display:inline-block;
    vertical-align:top;
}
#demo span{
    margin:1px -1px; /* 關鍵規(guī)則 */
}

一條CSS規(guī)則我們就可以實現(xiàn)1px圓角，你信嗎？來看DEMO1：margin實現(xiàn)1px圓角

看到DEMO1的結果后，你會發(fā)現(xiàn)我們確實做到了1px圓角，很簡單，有木有？在沒有 border-radius 的年代，我們也很歡樂。

看到Code后，我想應該不用太解釋為什么可以實現(xiàn)？
BTW，多像素圓角也可以參考這種方式來實現(xiàn)，如果你實在不想用圖片的話。

已知寬高元素水平垂直居中

必須說，這是一個非常典型的 margin 應用，雖然如今看起來貌似使用場景不是太大，但還是好多人喜歡在面試時對人問起，我偶爾也會，但不多。

假設一個寬300px，高300px的盒子要在整個頁面中水平垂直居中，我們可以這樣做：

HTML

<div id="demo">這是一個水平垂直居中的容器</div>

CSS

#demo{
    position:absolute;
    top:50%;
    left:50%;
    width:300px;
    height:300px;
    margin-top:-150px;
    margin-left:-150px;
}

恩，是的，借助絕對定位。我們先來看看 DEMO2：margin實現(xiàn)已知寬高元素水平垂直居中

先通過 top/left 將 #demo 的絕對定位流起始位置設置為當前屏的中心點，此時 #demo 的左上角這個點其實已經(jīng)是相對于頁面水平垂直居中了，由于它的寬度和高度都是300px，所以從起始位置向右下各延伸300px后才是整個 #demo 的真正位置。此時整個 #demo 其實并不是水平垂直居中的，除非我們將 #demo 的中心點放在當前屏的中心點上。怎么做？

這時我們就需要使用 margin 了，在 margin系列之與相對偏移的異同 這篇文章里，我們就說過 margin 是以自身作為參照物進行位置偏移的。所以我們只需要將 #demo 相對自身向上偏移150px，向左偏移150px，就能夠?qū)崿F(xiàn)將自身的中心點放在當前屏的中心點上，也就實現(xiàn)了自身在當前屏的水平垂直居中。

為什么代碼里是 -150px ？好吧，如果用 margin-top 來實現(xiàn)向上偏移，必須是負值，不是么？如果是正值的話，就是向下偏移了，其實也相當于是 margin-bottom 的正值， margin-left 亦然，我們在 margin系列之與相對偏移的異同 文章最后同樣說過這個。基礎知識很重要，有木有？

tabstrip底邊線重合

先上個需求，如 圖二：

（圖二）

看到 圖二 ，我想大家可能知道可能知道要做什么了。

對，我們要做的就是 tab 項與底邊線重合，這應該是我們常見的場景了，margin 仍然是最佳選擇。先來看代碼：

HTML

<div id="demo">
    <a href="?">分類一</a>
    <a href="?" class="on">分類二</a>
    <a href="?">分類三</a>
    <a href="?">分類四</a>
</div>

CSS

#demo{
    border-bottom:1px solid #aaa;
}
#demo a{
    display:inline-block;
    margin-bottom:-1px;
    border:1px solid #aaa;
}
#demo .on{
    border-bottom-color:#fff;
}

要實現(xiàn) tab 中各項與包含塊的底邊線重合，重點在于將包含塊的底邊線向上偏移1px，這樣就與 tab 各項的底部重合在一起。

怎樣可以做到讓包含塊底邊線向上偏移1px？恩，margin 是那么的順其自然。我們只需要將 tab 各項的 margin-bottom 設置為 -1px 即可，其本身高度不變，但包含塊底部會向上1px。

來看看具體實現(xiàn)的例子 DEMO3：tabstrip底邊線重合

雙重邊線

實際場景可能比這會稍復雜一些，我們看個大概即可，主要是拓寬一下思路，來看 圖三：

（圖三）

從圖三中，我們可以看到每行都會有一個雙色的邊線，這就是我們要做的，HTML代碼大約是這樣：

HTML

<div id="demo">
    <ul>
        <li>這是一個雙重邊線的示例</li>
        <li>這是一個雙重邊線的示例</li>
        <li>這是一個雙重邊線的示例</li>
        <li>這是一個雙重邊線的示例</li>
    </ul>
</div>

怎么做？恩，我們可以用常規(guī)的方式來解決，比如完全使用 border ：

CSS Case1

#demo li{
    border-top:1px solid #fff;
    border-bottom:1px solid #ccc;
}

結果出來后，我們會發(fā)現(xiàn)最頂部多出了一條線，同時最底部又少了一條線。當然，這都可以被解決，我們可以讓 ul 來輔助完成，例如讓其 負margin-top + border-bottom，不過如果 ul 或者其父元素有垂直方向 padding 的話，處理起來可能會稍顯蛋疼。
還有其他解？當然，會有的，來看：

CSS Case2

#demo ul{
    overflow:hidden;
    background:#fff;
}
#demo li{
    margin-bottom:1px;
    border-bottom:1px solid #ccc;
    background:#eee;
}

是的，選擇 margin 作為實現(xiàn)手段。以 ul 的底色配合 margin 模擬出線條的外觀，這其實也挺討人喜歡的，不是么？看具體實現(xiàn) DEMO4：雙重邊線

margin 模擬邊線還可以做什么？比如做個表格神馬的，看看 DEMO5：margin模擬表格邊線