[[358254]]

 前言

最近忙里偷閑，給自己加油充電的時(shí)候，發(fā)現(xiàn)自己腦海中布局這塊非常的凌亂混雜，于是花了一些時(shí)間將一些常用的布局及其實(shí)現(xiàn)方法整理梳理了出來(lái)，在這里，分享給大家。

單列布局

單列布局是最常用的一種布局，一般是將一個(gè)元素作為容器，設(shè)置一個(gè)固定的寬度，水平居中對(duì)齊。

單列布局一般有兩種形式：

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

一欄布局

一欄布局頭部、內(nèi)容、底部寬度一致

效果圖

代碼實(shí)現(xiàn)

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; 
} 

一欄布局(通欄)

一欄布局(通欄)頭部和底部寬度一致，占滿整個(gè)頁(yè)面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。

效果圖

代碼實(shí)現(xiàn)

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; 
} 

• 單列布局是最為基礎(chǔ)和簡(jiǎn)單的一種，實(shí)現(xiàn)方法并不局限于以上兩種，大家可自由發(fā)揮，找到更多的方法來(lái)實(shí)現(xiàn)。

2列布局

2列布局的使用頻率也非常高，其實(shí)現(xiàn)效果主要就是將頁(yè)面分割成左右寬度不等的兩列。一般寬度較小的一列會(huì)設(shè)置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。

在后臺(tái)管理系統(tǒng)及api文檔中使用較為廣泛。

效果圖

先來(lái)看看效果：

代碼實(shí)現(xiàn)

實(shí)現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。

calc函數(shù)

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。實(shí)現(xiàn)思路很簡(jiǎn)單，側(cè)邊欄寬度固定，設(shè)置絕對(duì)定位，使其脫離文檔流，內(nèi)容區(qū)域通過(guò)calc()函數(shù)計(jì)算剩余寬度并設(shè)置寬度，再加一個(gè)margin-left，值為側(cè)邊欄的寬度。

代碼如下：

html

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

*{ 
    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屬性

通過(guò)flex屬性實(shí)現(xiàn)思路也很簡(jiǎn)單，將父元素設(shè)置為flex，側(cè)邊欄寬度固定，內(nèi)容區(qū)域設(shè)置flex:1即可充滿剩余區(qū)域。

代碼如下：

html

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

*{ 
    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 列布局在日常開發(fā)中使用頻率也是很高的，其按照左中右的順序進(jìn)行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應(yīng)，能根據(jù)屏幕大小做響應(yīng)。

效果圖

還是先來(lái)看看效果圖

代碼實(shí)現(xiàn)

三列布局的實(shí)現(xiàn)方法也很多，這里主要介紹兩種(雙飛翼布局、圣杯布局、flex布局)

在介紹雙飛翼布局和圣杯布局之前要先說(shuō)一下margin設(shè)置負(fù)值的作用：

當(dāng)margin的值設(shè)為負(fù)值的時(shí)候，元素會(huì)對(duì)應(yīng)的像那個(gè)放向移動(dòng)，比如margin-left為負(fù)值，元素則會(huì)左移

雙飛翼布局

代碼如下：

html

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

* { 
    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> 

* { 
    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; 
} 

• 雙飛翼布局其實(shí)和圣杯布局的精髓是一樣的，都是通過(guò)設(shè)置負(fù)margin來(lái)實(shí)現(xiàn)元素的排布，不同的就是html結(jié)構(gòu)，雙飛翼是在center元素內(nèi)部又設(shè)置了一層inner-center的元素并設(shè)置它的左右margin，而非圣杯布局的padding，來(lái)排除兩邊元素的覆蓋。所以這兩種布局原理基本一樣，關(guān)鍵就是在于設(shè)置負(fù)margin的技巧，和元素浮動(dòng)的相對(duì)定位技巧來(lái)實(shí)現(xiàn)。

flex布局

代碼如下:

html

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

* { 
    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; 
} 

• 如果不考慮瀏覽器兼容問題的話，運(yùn)用flex布局是最簡(jiǎn)單的方式。

垂直方向的布局(sticky footer)

這種布局將頁(yè)面分成上、中、下三個(gè)部分，上、下部分都為固定高度，中間部分高度不定。當(dāng)頁(yè)面高度小于瀏覽器高度時(shí)，下部分應(yīng)固定在屏幕底部;當(dāng)頁(yè)面高度超出瀏覽器高度時(shí)，下部分應(yīng)該隨中間部分被撐開，顯示在頁(yè)面最底部。

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

代碼實(shí)現(xiàn)

首先我們先構(gòu)建簡(jiǎn)單的HTML代碼

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

為內(nèi)容區(qū)域添加最小的高度

這種方法重要用vh(viewpoint height)來(lái)計(jì)算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：

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

從而這個(gè)問題就解決了，但是如果頁(yè)面的footer高度不同怎么辦?每一個(gè)頁(yè)面都要重新計(jì)算一次，這是很麻煩的，所以這種方法雖然簡(jiǎn)單但卻是不推薦的。

使用flex布局

這種方法就是利用flex布局對(duì)視窗高度進(jìn)行分割。footer的flex設(shè)為0，這樣footer獲得其固有的高度;content的flex設(shè)為1，這樣它會(huì)充滿除去footer的其他部分。

代碼如下：

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

這樣的布局簡(jiǎn)單使用，比較推薦。

在content的外面可以添加一個(gè)wrapper

這種方法就是在content的外面添加一個(gè)包裹容易，將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高度的負(fù)值 */ 
    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的文檔結(jié)構(gòu)。

粘性布局(sticky)

粘性布局是什么呢?我們先來(lái)看看效果演示

沒錯(cuò)，其實(shí)就是在頁(yè)面滾動(dòng)的時(shí)候保持元素(這里的是標(biāo)題)在頁(yè)面視圖上方，也就是我們常常看到的 吸附效果。

標(biāo)題行設(shè)置了背景色。如果不設(shè)置背景色(背景透明)，正常文檔流的文字就會(huì)和標(biāo)題行文字重疊在一起顯示。

sticky定位的元素會(huì)遮住滾動(dòng)而來(lái)的“正常”的文檔流;后面的sticky元素會(huì)覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。

代碼實(shí)現(xiàn)

實(shí)現(xiàn)粘性布局主要依靠position的sticky屬性。

position: sticky; 

先來(lái)看看兼容性：

從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時(shí)候要慎重考慮，如果不要求兼容的情況，用這個(gè)還是相當(dāng)?shù)氖娣恕?/p>

下面給出一個(gè)簡(jiǎn)單的示例。

html:

<main> 
    <header>標(biāo)題一</header> 
    <div class="content"> 
    </div> 
    <header>標(biāo)題二</header> 
    <div class="content"> 
    </div> 
    <header>標(biāo)題三</header> 
    <div class="content"> 
    </div> 
    <header>標(biāo)題四</header> 
    <div class="content"> 
    </div> 
</main> 

 js(不想寫太多p標(biāo)簽，所以用js生成，偷個(gè)懶):

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; 
}