css精髓：這些佈局你都學廢了嗎？

前言

最近忙裏偷閒，給本身加油充電的時候，發現本身腦海中佈局這塊很是的凌亂混雜，因而花了一些時間將一些經常使用的佈局及其實現方法整理梳理了出來，在這裏，分享給你們。

單列布局

單列布局是最經常使用的一種佈局，通常是將一個元素做爲容器，設置一個固定的寬度，水平居中對齊。

單列布局通常有兩種形式：

(圖片來源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一欄佈局

一欄佈局頭部、內容、底部寬度一致

效果圖

代碼實現

html

<header></header>
<main></main>
<footer></footer>

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}

一欄佈局（通欄）

一欄佈局（通欄）頭部和底部寬度一致，佔滿整個頁面，中間內容區域寬度較小不佔滿屏幕。

效果圖

代碼實現

html

<header></header>
<main></main>
<footer></footer>

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}

單列布局是最爲基礎和簡單的一種，實現方法並不侷限於以上兩種，你們可自由發揮，找到更多的方法來實現。

2列布局

2列布局的使用頻率也很是高，其實現效果主要就是將頁面分割成左右寬度不等的兩列。通常寬度較小的一列會設置爲固定寬度，做爲側邊欄之類的，而另外一列則充滿剩餘寬度，做爲內容區。

在後臺管理系統及api文檔中使用較爲普遍。

效果圖

先來看看效果：

代碼實現

實現兩列布局的方法有不少，這裏主要介紹兩種方法。

calc函數

calc() 函數用於動態計算長度值。實現思路很簡單，側邊欄寬度固定，設置絕對定位，使其脫離文檔流，內容區域經過calc()函數計算剩餘寬度並設置寬度，再加一個margin-left，值爲側邊欄的寬度。

代碼以下：

html

<div class="slider"></div>
<div class="main"></div>

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}

flex屬性

經過flex屬性實現思路也很簡單，將父元素設置爲flex，側邊欄寬度固定，內容區域設置flex:1便可充滿剩餘區域。

代碼以下：

html

<div class="slider"></div>
<div class="main"></div>

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}

3列布局

3 列布局在平常開發中使用頻率也是很高的，其按照左中右的順序進行排列，一般中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應，能根據屏幕大小作響應。

效果圖

仍是先來看看效果圖

代碼實現

三列布局的實現方法也不少，這裏主要介紹兩種（雙飛翼佈局、聖盃佈局、flex佈局）

在介紹雙飛翼佈局和聖盃佈局以前要先說一下margin設置負值的做用：

當margin的值設爲負值的時候，元素會對應的像那個放向移動，好比margin-left爲負值，元素則會左移

雙飛翼佈局

代碼以下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中間
        </div>
    </div>
    <div class="left">
        左邊
    </div>
    <div class="right">
        右邊
    </div>
</div>

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}

聖盃佈局

代碼以下:
html

<div class="main">
    <div class="center">中間中間中間中間中間中間中間後</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}

雙飛翼佈局其實和聖盃佈局的精髓是同樣的，都是經過設置負margin來實現元素的排布，不一樣的就是html結構，雙飛翼是在center元素內部又設置了一層inner-center的元素並設置它的左右margin，而非聖盃佈局的padding，來排除兩邊元素的覆蓋。因此這兩種佈局原理基本同樣，關鍵就是在於設置負margin的技巧，和元素浮動的相對定位技巧來實現。

flex佈局

代碼以下:
html

<div class="main">
    <div id="left">左邊定寬</div>
    <div id="main">中間自適應</div>
    <div id="right">右邊定寬</div>
</div>

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}

若是不考慮瀏覽器兼容問題的話，運用flex佈局是最簡單的方式。

垂直方向的佈局（sticky footer）

這種佈局將頁面分紅上、中、下三個部分，上、下部分都爲固定高度，中間部分高度不定。當頁面高度小於瀏覽器高度時，下部分應固定在屏幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。

這種佈局也稱之爲sticky footer，意思是下部分粘黏在屏幕底部。

代碼實現

首先咱們先構建簡單的HTML代碼

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>

其中content爲咱們的內容區。下面開始介紹解決方法。

爲內容區域添加最小的高度

這種方法重要用vh(viewpoint height)來計算總體視窗的高度(1vh等於視窗高度的1%),而後減去底部footer的高度，從而求得內容區域的最小高度。例如咱們能夠添加以下樣式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}

從而這個問題就解決了，可是若是頁面的footer高度不一樣怎麼辦?每個頁面都要從新計算一次，這是很麻煩的，因此這種方法雖然簡單但倒是不推薦的。

使用flex佈局

這種方法就是利用flex佈局對視窗高度進行分割。footer的flex設爲0，這樣footer得到其固有的高度;content的flex設爲1，這樣它會充滿除去footer的其餘部分。

代碼以下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

這樣的佈局簡單使用，比較推薦。

在content的外面能夠添加一個wrapper

這種方法就是在content的外面添加一個包裹容易，將html代碼改爲這樣：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

而後添加如下樣式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必須使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;
}

另外，爲了保證兼容性，須要在wrapper上添加clearfix類。其代碼以下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結構。

粘性佈局（sticky）

粘性佈局是什麼呢？咱們先來看看效果演示

沒錯，其實就是在頁面滾動的時候保持元素（這裏的是標題）在頁面視圖上方，也就是咱們經常看到的 吸附效果。

標題行設置了背景色。若是不設置背景色（背景透明），正常文檔流的文字就會和標題行文字重疊在一塊兒顯示。

sticky定位的元素會遮住滾動而來的「正常」的文檔流；後面的sticky元素會覆蓋前面的sticky元素，就好像一層層的便利貼，是否是很酷~~。

代碼實現

實現粘性佈局主要依靠position的sticky屬性。

position: sticky;

先來看看兼容性：

從Can I use上查詢能夠看出，sticky的兼容性並非太好，因此你們使用的時候要慎重考慮，若是不要求兼容的狀況，用這個仍是至關的舒服了。

下面給出一個簡單的示例。

html:

<main>
    <header>標題一</header>
    <div class="content">
    </div>
    <header>標題二</header>
    <div class="content">
    </div>
    <header>標題三</header>
    <div class="content">
    </div>
    <header>標題四</header>
    <div class="content">
    </div>
</main>

js(不想寫太多p標籤，因此用js生成，偷個懶):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}