H5樣式與佈局 -- 常見頁面佈局

頁面總體佈局

1.單列布局

特徵：定寬、水平居中

常見的單列布局有兩種：

　　1. header、content、footer寬度都相同，其通常不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。

<div class="layout">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

對header、container、footer統一設置width或max-width，並經過margin:auto實現居中。

.layout{
/*width: 960px;*/
max-width: 960px;
margin: 0 auto;
}

　　2. header、footer寬度爲瀏覽器寬度，但content以及header和footer裏的內容卻不會佔滿瀏覽器寬度。

<div id="header">
    <div class="layout"></div>
</div>
<div id="container" class="layout"></div>
<div id="footer">
    <div class="layout"></div>
</div>

header、footer的內容寬度爲100%，但header、footer的內容區以及content統一設置max-width，並經過margin:auto實現居中。

.layout{
/*width: 960px;*/
max-width: 960px;
margin: 0 auto;
}

 

2.雙列與三列布局

 雙列布局：

側欄固定寬度，主欄自適應寬度。

主要說說左側固定右側自適應的狀況，其餘狀況可類推。

<div class="page">
    <div class="side">我是綠色</div>
    <div class="main">我是藍色</div>
</div>

/*通常佈局*/
.page {
    position: relative;
}
.side {
    position: absolute;
    left: 0;
    width: 300px;
    height: 550px;
    background: green;
}
.main {
    margin-left: 310px;
    height: 550px;
    background: blue;
}

/*flex佈局*/
.page {
    display: flex;
}
.side {
    flex:0 0 300px;
    height: 550px;
    margin-right:10px;
    background: green;
}
.main {
    flex:1;
    height: 550px;
    background: blue;
}

三列布局：

主要說說左右固定中間自適應的狀況，其餘狀況可類推。

a. float+margin

原理說明：設置兩個側欄分別向左向右浮動，中間列經過外邊距給兩個側欄騰出空間，中間列的寬度根據瀏覽器窗口自適應。

佈局步驟:

1. 對兩邊側欄分別設置寬度，並對左側欄添加左浮動，對右側欄添加有浮動。

2. 對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。

一些說明:

　　1. 注意DOM文檔的書寫順序，先寫兩側欄，再寫主面板。若更換，側欄會被擠到下一列。（聖盃佈局和雙飛翼佈局都會用到）。
　　2. 這種佈局方式比較簡單明瞭，但缺點是渲染時先渲染了側邊欄，而不是比較重要的主面板。

<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px; 
    margin-right: 200px;
}

b. position+margin

原理說明：經過絕對定位將兩個側欄固定，一樣經過外邊距給兩個側欄騰出空間，中間列自適應。

佈局步驟:

1. 對兩邊側欄分別設置寬度，設置定位方式爲絕對定位。

2. 設置兩側欄的top值都爲0，設置左側欄的left值爲0， 右側欄的right值爲0。

3. 對主面板設置左右外邊距，margin-left的值爲左側欄的寬度，margin-right的值爲右側欄的寬度。

一些說明:

　　1. 與上一種方法相比，本種方法是經過定位來實現側欄的位置固定。

　　2. 若是中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器窗口小到必定程度，主面板與側欄會發生重疊。

　　<div id="content">
　　　　<div class="sub">sub</div>
　　　　<div class="main">main</div>
　　　　<div class="extra">extra</div>
　　</div>

.sub, .extra {
    position: absolute;
    top: 0; 
    width: 200px;
}
.sub { 
    left: 0;
}
.extra { 
    right: 0; 
}
.main { 
    margin: 0 200px;
}

c. 聖盃佈局(float + 負margin + padding + position)

原理說明：

爲了讓瀏覽器最早渲染main，要把main放DOM最上面，以此爲出發點展開的佈局。就是聽起來高大上的三欄佈局。

佈局步驟:

1. 三者都設置向左浮動。

2. 設置main寬度爲100%，設置兩側欄的寬度。

3. 設置 負邊距，sub設置負左邊距爲100%，extra設置負左邊距爲負的自身寬度。

4. 設置main的padding值給左右兩個子面板留出空間。

5. 設置兩個子面板爲相對定位，sub的left值爲負的sub寬度，extra的right值爲負的extra寬度。

一些說明

　　1. DOM元素的書寫順序不得更改。

　　2. 當面板的main內容部分比兩邊的子面板寬度小的時候，佈局就會亂掉。能夠經過設置main的min-width屬性或使用雙飛翼佈局避免問題。

 <div id="bd">         
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div> 

.main {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;               
    position: relative;  
    left: -190px;  
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
    position: relative; 
    right: -230px;  
 }
#bd {        
    padding: 0 230px 0 190px;   
 }

c. 雙飛翼佈局(float + 負margin + margin)

原理說明：

聖盃佈局的改進版，在main元素上加了一層div, 並設置margin。

佈局步驟:

1. 三者都設置向左浮動。

2. 設置main-wrap寬度爲100%，設置兩個側欄的寬度。

3. 設置 負邊距，sub設置負左邊距爲100%，extra設置負左邊距爲負的自身寬度。

4. 設置main的margin值給左右兩個子面板留出空間。

一些說明

　　1. 聖盃採用的是padding，而雙飛翼採用的margin，解決了聖盃佈局main的最小寬度不能小於左側欄的缺點。

　　2. 雙飛翼佈局不用設置相對佈局，以及對應的left和right值。

　　3. 經過引入相對佈局，能夠實現三欄佈局的各類組合，例如對右側欄設置position: relative; left: 190px; ,能夠實現sub+extra+main的佈局。

<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

.main-wrap {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
 }
.main {    
    margin: 0 230px 0 190px;
}

c. flex 佈局

簡單好用

<div id="content">
　　　　<div class="sub">sub</div>
　　　　<div class="main">main</div>
　　　　<div class="extra">extra</div>
</div>

#content {
    display: flex;
}
.sub,.extra {
    flex: 0 0 200px;
    height: 550px;
    background: green;
}
.main {
    flex: 1;
    height: 550px;
    background: blue;
}

 

總結：三欄佈局通常用 position + margin 方案就好，瀏覽器容許直接上flex 通吃。

 

以上是本人目前瞭解的，如有看客，望不吝拍磚。

 

參考連接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  （flex語法篇）

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html　（flex實例篇）

https://segmentfault.com/a/1190000011990028    （有關聖盃與雙飛翼）