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

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)寫(xiě)過(guò)一篇關(guān)于 margin 應(yīng)用場(chǎng)景的文章：margin系列之內(nèi)秀篇，當(dāng)然，它的應(yīng)用場(chǎng)景會(huì)遠(yuǎn)大于文中所述，無(wú)法一一列舉。

所以本篇權(quán)當(dāng)是對(duì)此的補(bǔ)遺好了，各位客官如有比較Cool的想法都可以留言給我，我會(huì)視情況補(bǔ)丁進(jìn)來(lái)。

1像素圓角

這有什么好聊的嗎？border-radius 瞬間可將之秒殺。恩，有的時(shí)候你不得不承認(rèn)CSS3真是一把大殺器。不過(guò)當(dāng)年我們是怎么做的？（會(huì)暴露年齡么？）

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

如上圖一，我們會(huì)這樣寫(xiě)：

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ān)鍵規(guī)則 */
}

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

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

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

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

必須說(shuō)，這是一個(gè)非常典型的 margin 應(yīng)用，雖然如今看起來(lái)貌似使用場(chǎng)景不是太大，但還是好多人喜歡在面試時(shí)對(duì)人問(wèn)起，我偶爾也會(huì)，但不多。

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

HTML

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

CSS

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

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

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

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

為什么代碼里是 -150px ？好吧，如果用 margin-top 來(lái)實(shí)現(xiàn)向上偏移，必須是負(fù)值，不是么？如果是正值的話(huà)，就是向下偏移了，其實(shí)也相當(dāng)于是 margin-bottom 的正值， margin-left 亦然，我們?cè)?margin系列之與相對(duì)偏移的異同 文章最后同樣說(shuō)過(guò)這個(gè)?；A(chǔ)知識(shí)很重要，有木有？

tabstrip底邊線(xiàn)重合

先上個(gè)需求，如 圖二：

（圖二）

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

對(duì)，我們要做的就是 tab 項(xiàng)與底邊線(xiàn)重合，這應(yīng)該是我們常見(jiàn)的場(chǎng)景了，margin 仍然是最佳選擇。先來(lái)看代碼：

HTML

<div id="demo">
    <a href="?">分類(lèi)一</a>
    <a href="?" class="on">分類(lèi)二</a>
    <a href="?">分類(lèi)三</a>
    <a href="?">分類(lèi)四</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;
}

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

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

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

雙重邊線(xiàn)

實(shí)際場(chǎng)景可能比這會(huì)稍復(fù)雜一些，我們看個(gè)大概即可，主要是拓寬一下思路，來(lái)看 圖三：

（圖三）

從圖三中，我們可以看到每行都會(huì)有一個(gè)雙色的邊線(xiàn)，這就是我們要做的，HTML代碼大約是這樣：

HTML

<div id="demo">
    <ul>
        <li>這是一個(gè)雙重邊線(xiàn)的示例</li>
        <li>這是一個(gè)雙重邊線(xiàn)的示例</li>
        <li>這是一個(gè)雙重邊線(xiàn)的示例</li>
        <li>這是一個(gè)雙重邊線(xiàn)的示例</li>
    </ul>
</div>

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

CSS Case1

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

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

CSS Case2

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

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

margin 模擬邊線(xiàn)還可以做什么？比如做個(gè)表格神馬的，看看 DEMO5：margin模擬表格邊線(xiàn)