margin系列以內秀篇（二）

本系列摘自  飄零霧雨的博客

可挖掘性

以前已經寫過一篇關於 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模擬表格邊線