CSS佈局

合理的佈局是產品的基礎，可使人感受整齊大方，提高用戶體驗。掌握幾種常見的佈局形式也是前端開發的基礎，對於快速實現頁面重構有很大幫助。

原文連接

單列布局

單列布局一般用於網站的首頁，分爲頭部的導航、網頁內容、頁腳相關信息。

//html
<div class="body">
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
</div>

//css
.body{
    max-width: 1200px;
    margin: 0 auto;
}

優勢：佈局實現簡單，界面顯示總體性強，給人感受簡潔大方。

左右佈局

左右佈局常見於博客、後臺管理系統，左側爲導航，右側作內容顯示。

//html
<div class="body">
    <div class="left"></div>
    <div class="right"></div>
</div>

float+margin

左側元素設置成向左浮動並固定寬度，右側元素左外邊距預留出左側元素的寬度。

//css
.body{
    max-width: 1200px;
    margin: 0 auto;
}

.left{
    width: 200px;
    float: left;
}

.right{
    margin-left: 200px;
}

優勢：佈局簡單，右側寬帶可自適應。

position+margin

左側元素用絕對定位固定在左邊，右側元素預留左外邊距。

.body{
    max-width: 1200px;
    margin: 0 auto;
}

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.right{
    margin-left: 200px;
}

優勢：左側內容可固定位置，右側內容寬度自適應。

聖盃佈局

聖盃佈局和雙飛翼佈局都是爲了解決兩邊定寬，中間自適應的三欄佈局，中間欄在最前面優先渲染，多見於商城類網站佈局。

float+負margin+padding+position

佈局步驟：
一、三列內容都設置向左浮動。
二、設置container寬度爲100%，設置兩側欄的寬度。
三、設置left左邊距爲負100%，設置right左邊距爲負的自身寬度。
四、設置body的padding值給左右兩塊內容留空間。
五、設置left、right爲相對定位，左側的left屬性值爲負自身寬度，右側的right屬性值爲負自身寬度。

//html
<div class="body">
    <div class="container"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

//css
.body{
    padding: 0 150px;
}

.container{
    float: left;
    width: 100%;
}

.left, .right{
    position: relative;
    float: left;
    width: 150px;
}

.left{
    left: -150px;
    margin-left: -100%;
}

.right{
    right: -150px;
    margin-left: -150px;
}

這種佈局中html的順序不能更改，當窗口太小時會出現佈局錯亂，能夠設置min-widthmin-width解決。

雙飛翼佈局

雙飛翼佈局始於淘寶UED，與聖盃佈局類似，可是作了改進，是用html結構的調整減小了相對屬性設置

float+負margin+margin

佈局步驟：
一、三列內容都設置向左浮動。
二、設置container寬度爲100%，設置左右內容的寬度。
三、設置left左邊距爲負100%，設置right左邊距爲負自身寬度。
四、設置content的margin值給左右內容留空間。

//html
<div class="container">
    <div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>

//css
.container, .left, .right{
    float: left;
}

.container{
    width: 100%;
}

.left{
    width: 150px;
    margin-left: -100%;
}

.right{
    width: 150px;
    margin-left: -150px;
}

.content{
    margin: 0 150px;
}

優勢：

• 聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局main的最小寬度不能小於左側欄的缺點。
• 雙飛翼佈局不用設置相對佈局，以及對應的left和right值。
• 經過引入相對佈局，能夠實現三欄佈局的各類組合，例如對右側欄設置position: relative; left: 150px; ,能夠實現left+right+content的佈局。

flex佈局

與傳統佈局方式相比，flex提供了一套簡潔、完整、響應式的解決方案。
能夠看下flex佈局學習瞭解一下。

這裏只是簡單介紹幾種佈局方式，display+position+float屬性能夠實現不一樣特殊效果佈局展示形式，選擇最適合的方案纔是王道