margin系列之內秀篇（二）

原文地址：margin系列之內秀篇（二） by @doyoe

可挖掘性

之前已經寫過一篇關於 margin 應用場景的文章：margin系列之內秀篇，當然，它的應用場景會遠大於文中所述，無法一一列舉。

所以本篇權當是對此的補遺好了，各位客官如有比較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; /* 關鍵規則 */
}

一條CSS規則我們就可以實現1px圓角，你信嗎？來看DEMO1：margin實現1px圓角

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

看到Code後，我想應該不用太解釋為什麼可以實現？

BTW，多畫素圓角也可以參考這種方式來實現，如果你實在不想用圖片的話。

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

必須說，這是一個非常典型的 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實現已知寬高元素水平垂直居中

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

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

為什麼程式碼裡是 -150px ？好吧，如果用 margin-top 來實現向上偏移，必須是負值，不是麼？如果是正值的話，就是向下偏移了，其實也相當於是 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;
}

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

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

來看看具體實現的例子 DEMO3：tabstrip底邊線重合

雙重邊線

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

（圖三）

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

HTML

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

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

CSS Case1

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

結果出來後，我們會發現最頂部多出了一條線，同時最底部又少了一條線。當然，這都可以被解決，我們可以讓 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 作為實現手段。以 ul 的底色配合 margin 模擬出線條的外觀，這其實也挺討人喜歡的，不是麼？看具體實現 DEMO4：雙重邊線

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

margin系列文章：

• margin系列之bug巡演（三）
• margin系列之bug巡演（二）
• margin系列之內秀篇（二）
• margin系列之bug巡演
• margin系列之內秀篇
• margin系列之外邊距摺疊
• margin系列之與相對偏移的異同
• margin系列之百分比
• margin系列之keyword auto