# margin系列之內秀篇（二）
>原作者：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/
## 可挖掘性
之前已經寫過一篇關于 `margin` 應用場景的文章：[margin系列之內秀篇](http://www.hmoore.net/jaya1992/fe-notes/81969)，當然，它的應用場景會遠大于文中所述，無法一一列舉。
所以本篇權當是對此的補遺好了，各位客官如有比較Cool的想法都可以留言給我，我會視情況補丁進來。
## 1像素圓角
這有什么好聊的嗎？`border-radius` 瞬間可將之秒殺。恩，有的時候你不得不承認CSS3真是一把大殺器。不過當年我們是怎么做的？（會暴露年齡么？）
先看看我們要做什么,`圖一`：
（圖一）
如上圖一，我們會這樣寫：
### HTML
```html
<div id="demo">
<a href="?"><span>1px圓角</span></a>
<a href="?"><span>確定</span></a>
<a href="?"><span>取消</span></a>
</div>
```
### CSS
```css
#demo a,#demo span{
display:inline-block;
vertical-align:top;
}
#demo span{
margin:1px -1px; /* 關鍵規則 */
}
```
一條CSS規則我們就可以實現1px圓角，你信嗎？來看`DEMO1`：[margin實現1px圓角](http://demo.doyoe.com/css/margin/radius.htm)
看到DEMO1的結果后，你會發現我們確實做到了1px圓角，很簡單，有木有？在沒有 `border-radius` 的年代，我們也很歡樂。
看到Code后，我想應該不用太解釋為什么可以實現？
BTW，多像素圓角也可以參考這種方式來實現，如果你實在不想用圖片的話。
## 已知寬高元素水平垂直居中
必須說，這是一個非常典型的 `margin` 應用，雖然如今看起來貌似使用場景不是太大，但還是好多人喜歡在面試時對人問起，我偶爾也會，但不多。
假設一個寬300px，高300px的盒子要在整個頁面中水平垂直居中，我們可以這樣做：
### HTML
```html
<div id="demo">這是一個水平垂直居中的容器</div>
```
### CSS
```css
#demo{
position:absolute;
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;
margin-left:-150px;
}
```
恩，是的，借助絕對定位。我們先來看看 `DEMO2`：[margin實現已知寬高元素水平垂直居中](http://demo.doyoe.com/css/margin/alignment.htm)
先通過 `top/left` 將 `#demo` 的絕對定位流起始位置設置為當前屏的中心點，此時 `#demo` 的左上角這個點其實已經是相對于頁面水平垂直居中了，由于它的寬度和高度都是300px，所以從起始位置向右下各延伸300px后才是整個 `#demo` 的真正位置。此時整個 `#demo` 其實并不是水平垂直居中的，除非我們將 `#demo` 的中心點放在當前屏的中心點上。怎么做？
這時我們就需要使用 `margin` 了，在 margin系列之與相對偏移的異同 這篇文章里，我們就說過 `margin` 是以自身作為參照物進行位置偏移的。所以我們只需要將 `#demo` 相對自身向上偏移150px，向左偏移150px，就能夠實現將自身的中心點放在當前屏的中心點上，也就實現了自身在當前屏的水平垂直居中。
為什么代碼里是 `-150px` ？好吧，如果用 `margin-top` 來實現向上偏移，必須是負值，不是么？如果是正值的話，就是向下偏移了，其實也相當于是 `margin-bottom` 的正值， `margin-left` 亦然，我們在 [margin系列之與相對偏移的異同](http://www.hmoore.net/jaya1992/fe-notes/81816) 文章最后同樣說過這個。基礎知識很重要，有木有？
## tabstrip底邊線重合
先上個需求，如 `圖二`：
（圖二）
看到 `圖二` ，我想大家可能知道可能知道要做什么了。
對，我們要做的就是 `tab` 項與底邊線重合，這應該是我們常見的場景了，`margin` 仍然是最佳選擇。先來看代碼：
### HTML
```html
<div id="demo">
<a href="?">分類一</a>
<a href="?" class="on">分類二</a>
<a href="?">分類三</a>
<a href="?">分類四</a>
</div>
```
### CSS
```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底邊線重合](http://demo.doyoe.com/css/margin/tab.htm)
## 雙重邊線
實際場景可能比這會稍復雜一些，我們看個大概即可，主要是拓寬一下思路，來看 `圖三`：
（圖三）
從圖三中，我們可以看到每行都會有一個雙色的邊線，這就是我們要做的，HTML代碼大約是這樣：
### HTML
```html
<div id="demo">
<ul>
<li>這是一個雙重邊線的示例</li>
<li>這是一個雙重邊線的示例</li>
<li>這是一個雙重邊線的示例</li>
<li>這是一個雙重邊線的示例</li>
</ul>
</div>
```
怎么做？恩，我們可以用常規的方式來解決，比如完全使用 `border` ：
### CSS Case1
```css
#demo li{
border-top:1px solid #fff;
border-bottom:1px solid #ccc;
}
```
結果出來后，我們會發現最頂部多出了一條線，同時最底部又少了一條線。當然，這都可以被解決，我們可以讓 `ul` 來輔助完成，例如讓其 負margin-top + border-bottom，不過如果 `ul` 或者其父元素有垂直方向 `padding` 的話，處理起來可能會稍顯蛋疼。
還有其他解？當然，會有的，來看：
### CSS Case2
```css
#demo ul{
overflow:hidden;
background:#fff;
}
#demo li{
margin-bottom:1px;
border-bottom:1px solid #ccc;
background:#eee;
}
```
是的，選擇 `margin` 作為實現手段。以 `ul` 的底色配合 `margin` 模擬出線條的外觀，這其實也挺討人喜歡的，不是么？看具體實現 `DEMO4`：[雙重邊線](http://demo.doyoe.com/css/margin/double-lines.htm)
`margin` 模擬邊線還可以做什么？比如做個表格神馬的，看看 `DEMO5`：[margin模擬表格邊線](http://demo.doyoe.com/css/margin/table.htm)
