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    （有關聖杯與雙飛翼）