css佈局之負margin妙用及其餘實現

相信你們在項目的開發中都遇到過這樣的需求，一行放X（X>1）個塊且相鄰塊之間的間距相同。

大概就是上面這個樣子，下面介紹幾種實現的方式。

1.負margin大法

設置好元素的寬度和留白佔滿父級的寬度，而後設置父級的margin-left爲留白的負留白的寬度

<style type="text/css">

*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}

ul>li{
float: left;
}

ul>li>img{
width: 100%;
}

.test1{
padding: 0 2%;
margin-left: -3.3%;
}

.test1>li{
width: 30%;
margin-left: 3.3%;
}

</style>

<p>1.關於負margin的實現，因爲margin是基於父級計算的，會有必定的誤差，可是用於移動端上，偏差能夠忽略不計</p>
        <ul class="test1 clearfix">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

上面的偏差是由於ul的margin和li的margin百分比的計算基於的元素不同致使的，可是在移動端上由於視窗的範圍有限，這個差異很小，在pc上通常使用px，因此能夠忽略不計。（下面還有更多的辦法）

2.各大網站的實現，在元素內部進行填充,使用box-sizing，須要ie8及以上才支持

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    width: 1200px;
    border: 1px solid red;
    margin-left: -3.33%;
}
.test4>li{
    width: 30%;
    margin-left: 3.33%;
}
</style>
<p>2.各大網站的實現，在元素內部進行填充,使用box-sizing，須要ie8及以上才支持</p>
        <ul class="test2 clearfix">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

這種實現暫時還沒發現什麼缺點，代碼也簡單易懂（推薦）

3.彈性盒模型flex的實現，須要作兼容處理（舊盒子+新盒子）

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    width: 1200px;
    border: 1px solid red;
    margin-left: -3.33%;
}
.test4>li{
    width: 30%;
    margin-left: 3.33%;
}
</style>
<p>3.彈性盒模型flex的實現，須要作兼容處理（舊盒子+新盒子），僅爲演示，沒作兼容處理</p>
        <ul class="test3">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

這種狀況怎麼能少了咱們flex呢，彈性盒模型應該是專門用來處理這種狀況吧，可是又有新舊盒子模型之分，各瀏覽器實現的都不太同樣。因此通常狀況兩套盒子模型的屬性都須要加上。（喜歡折騰就上吧，效果棒棒的）

4.classname實現

將須要特殊處理的元素加上單獨的class，再作相應的處理。能夠後臺進行處理也能夠前端處理（推薦後臺處理）

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    padding: 0 2%;
}
.test4>li{
    width: 30%;
    margin-left: 5%;
}
.test4>li.first{
    margin: 0;
}
.test5{
    padding: 0 2%;
}
.test5>li{
    width: 30%;
    margin-left: 5%;
}
.test5>li:first-child{
    margin: 0;
}
</style>
<p>4.classname實現</p>
        <ul class="test4 clearfix">
            <li class="first"><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

5.css選擇器實現

:first-child :first-type-of :nth-child() 這些實現都沒有什麼技術難點，你們能夠去查閱一下css文檔，注意一下兼容性沒問題了

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    padding: 0 2%;
}
.test4>li{
    width: 30%;
    margin-left: 5%;
}
.test4>li.first{
    margin: 0;
}
.test5{
    padding: 0 2%;
}
.test5>li{
    width: 30%;
    margin-left: 5%;
}
.test5>li:first-child{
    margin: 0;
}
</style>
<p>5.css選擇器實現(注意ie兼容性)</p>
        <ul class="test5 clearfix">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

貼上所有的DEMO

差點忘了還有一種狀況X=2時，設置好width，左邊左浮動，右邊右浮動。

其實X=3時，還有一種處理方式，左右元素分別左右浮動，中間元素相對於父級設置絕對定位，居中定位。

注意，因爲不能整除的緣由，不能像box-sizing那樣完美的計算，可是合理的應用在項目上徹底沒問題。

我的思路畢竟有限，若是你們還有什麼其餘方案，歡迎留言。