margin小技巧

有個很典型的需求

相信接下來這個需求，你十有八九實現過，甚至實現過屢次，來看 圖一：

咱們看到這個圖中，有個列表，每一個列表項下面都有一條線，但最後一項沒有。咱們預期的代碼是：

<div id="demo">
    <h3>標題列表</h3>
    <ul>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
    </ul>
</div>

若是每項都有條底線，咱們能夠很簡單的作到，以下：

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

然而爲了處理最後一項，事情就變得有點糾結了。我知道確定有人要說，咱們有 :first-child, :nth-last-child(n), :nth-last-of-type(n) 之類的CSS3選擇符，要處理這個，太easy了。恩，我也不得不認可，CSS3確認讓事情變得簡單多了。但咱們可能須要面對一些國情，由於須要照顧一些弱小者，好比IE6-8，它們離CSS3的世界太遠。

傳說中的first/last解決方案

因此咱們須要找別的方法，因而這樣的代碼，相信你見過無數遍了：

<div id="demo">
    <h3>標題列表</h3>
    <ul>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li>&raquo; 有點累想歇一下好長一個標題</li>
        <li class="last">&raquo; 有點累想歇一下好長一個標題</li>
    </ul>
</div>

我沒亂說，你確定見到相似的代碼千百遍了？是的，它確實可以解決咱們的問題，代碼以下：

#demo .last{
    border-bottom: 0 none;
}

使用特殊的class來單獨處理這項，但我不是很喜歡這樣的code，緣由大體有：

• 需單獨定義一個差別化的class；

• 不利於數據循環輸出，由於還得判斷是否最後一項；

margin的神來之筆

基於以上的緣由，確定會有其它的解決方案出現，這時margin無疑是很是不錯的選擇，來看代碼：

#demo{
    overflow:hidden;
}
#demo ul{
    margin-bottom: -1px;
}

是否是很Cool，徹底避免了上述的問題，而且代碼量很小。margin是互動的，能影響其上下文的佈局。本例中，當 ul margin-bottom:-1px ，其自己的高並不會被改變，但其相鄰的元素則會往上 1px ，這時相鄰的元素即其包含塊 #demo，因此給 #demo overflow:hidden ，就直接將那 1px 的邊框給裁剪掉了。