CSS 佈局十八般武藝都在這裡了

發表於2017-03-25

CSS佈局

佈局是CSS中一個重要部分，本文總結了CSS佈局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型佈局和比較新的flex佈局實現），希望能給需要的小夥伴帶來一些幫助。

1.常用居中方法

居中在佈局中很常見，我們假設DOM文件結構如下，子元素要在父元素中居中：

<div class="parent">
    <div class="child"></div>
</div>

</div>

水平居中

子元素為行內元素還是塊狀元素，寬度一定還是寬度未定，採取的佈局方案不同。下面進行分析：

行內元素：對父元素設定text-align:center;
定寬塊狀元素: 設定左右margin值為auto;
不定寬塊狀元素: 設定子元素為display:inline,然後在父元素上設定text-align:center;
通用方案: flex佈局，對父元素設定display:flex;justify-content:center;

垂直居中

垂直居中對於子元素是單行內聯文字、多行內聯文字以及塊狀元素採用的方案是不同的。

父元素一定，子元素為單行內聯文字：設定父元素的height等於行高line-height
父元素一定，子元素為多行內聯文字：設定父元素的display:table-cell或inline-block，再設定vertical-align:middle;
塊狀元素:設定子元素position:fixed（absolute），然後設定margin:auto;
通用方案: flex佈局，給父元素設定{display:flex; align-items:center;}。

2.單列布局

特徵：定寬、水平居中

常見的單列布局有兩種：

一種是header、content、footer寬度都相同，其一般不會佔滿瀏覽器的最寬寬度，但當瀏覽器寬度縮小低於其最大寬度時，寬度會自適應。
一種是header、footer寬度為瀏覽器寬度，但content以及header和footer裡的內容卻不會佔滿瀏覽器寬度。

對於第一種，對header、content、footer統一設定width或max-width，並通過margin:auto實現居中。

DOM文件:

<div class="layout">
  <div id="header">頭部</div>
  <div id="content">內容</div>
  <div id="footer">尾部</div>
</div>

</div>

CSS清單:

  .layout{
  /*   width: 960px; *//*設定width當瀏覽器視窗寬度小於960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

.layout{

/* width: 960px; *//*設定width當瀏覽器視窗寬度小於960px時，單列布局不會自適應。*/

max-width: 960px;

margin: 0 auto;

}

對於第二種，header、footer的內容寬度為100%，但header、footer的內容區以及content統一設定max-width，並通過margin:auto實現居中。

DOM文件:

<div id="header">
  <div class="layout">頭部</div>
</div>
<div id="content" class="layout">內容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

</div>

</div>

CSS清單:

  .layout{
  /*   width: 960px; *//*設定width當瀏覽器視窗寬度小於960px時，單列布局不會自適應。*/
    max-width: 960px;
    margin: 0 auto;
  }

.layout{

/* width: 960px; *//*設定width當瀏覽器視窗寬度小於960px時，單列布局不會自適應。*/

max-width: 960px;

margin: 0 auto;

}

3. 二列&三列布局

二列布局的特徵是側欄固定寬度，主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度，中間列自適應寬度。

之所以將二列布局和三列布局寫在一起，是因為二列布局可以看做去掉一個側欄的三列布局，其佈局的思想有異曲同工之妙。對於傳統的實現方法，主要討論上圖中前三種佈局，經典的帶有側欄的二欄佈局以及帶有左右側欄的三欄佈局，對於flex佈局，實現了上圖的五種佈局。

a. float+margin

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

DOM文件:

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

<div class="extra">extra</div>

</div>

佈局步驟:

對兩邊側欄分別設定寬度，並對左側欄新增左浮動，對右側欄新增有浮動。
對主皮膚設定左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。

CSS清單:

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

.sub{

width: 100px;

float: left;

}

.extra{

width: 200px;

float: right;

}

.main{

margin-left: 100px;

margin-right: 200px;

}

一些說明:

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

二列的實現方法

如果是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設定主皮膚的margin-right值，其他操作相同。反之亦然。

b. position+margin

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

DOM文件:

<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

<div class="extra">right</div>

佈局步驟:

對兩邊側欄分別設定寬度，設定定位方式為絕對定位。
設定兩側欄的top值都為0，設定左側欄的left值為0，右側欄的right值為0。
對主皮膚設定左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。

CSS清單:

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

.sub, .extra {

position: absolute;

top: 0;

width: 200px;

}

.sub {

left: 0;

}

.extra {

right: 0;

}

.main {

margin: 0 200px;

}

一些說明:

與上一種方法相比，本種方法是通過定位來實現側欄的位置固定。
如果中間欄含有最小寬度限制，或是含有寬度的內部元素，則瀏覽器視窗小到一定程度，主皮膚與側欄會發生重疊。

二列的實現方法

如果是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設定主皮膚的margin-right值，其他操作相同。反之亦然。

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

原理說明：

主皮膚設定寬度為100%，主皮膚與兩個側欄都設定浮動，常見為左浮動，這時兩個側欄會被主皮膚擠下去。通過負邊距將浮動的側欄拉上來，左側欄的負邊距為100%，剛好是視窗的寬度，因此會從主皮膚下面的左邊跑到與主皮膚對齊的左邊，右側欄此時浮動在主皮膚下面的左邊，設定負邊距為負的自身寬度剛好浮動到主皮膚對齊的右邊。為了避免側欄遮擋主皮膚內容，在外層設定左右padding值為左右側欄的寬度，給側欄騰出空間，此時主皮膚的寬度減小。由於側欄的負margin都是相對主皮膚的，兩個側欄並不會像我們理想中的停靠在左右兩邊，而是跟著縮小的主皮膚一起向中間靠攏。此時使用相對佈局，調整兩個側欄到相應的位置。

DOM文件:

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

</div>

佈局步驟:

三者都設定向左浮動。
設定main寬度為100%，設定兩側欄的寬度。
設定負邊距，sub設定負左邊距為100%，extra設定負左邊距為負的自身寬度。
設定main的padding值給左右兩個子皮膚留出空間。
設定兩個子皮膚為相對定位，sub的left值為負的sub寬度，extra的right值為負的extra寬度。

CSS清單:

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

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

}

一些說明

DOM元素的書寫順序不得更改。
當皮膚的main內容部分比兩邊的子皮膚寬度小的時候，佈局就會亂掉。可以通過設定main的min-width屬性或使用雙飛翼佈局避免問題。

二列的實現方法

如果是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設定主皮膚的padding-right值，其他操作相同。反之亦然。

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

原理說明：

雙飛翼佈局和聖盃佈局的思想有些相似，都利用了浮動和負邊距，但雙飛翼佈局在聖盃佈局上做了改進，在main元素上加了一層div, 並設定margin,由於兩側欄的負邊距都是相對於main-wrap而言，main的margin值變化便不會影響兩個側欄，因此省掉了對兩側欄設定相對佈局的步驟。

DOM文件:

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

</div>

佈局步驟:

三者都設定向左浮動。
設定main-wrap寬度為100%，設定兩個側欄的寬度。
設定負邊距，sub設定負左邊距為100%，extra設定負左邊距為負的自身寬度。
設定main的margin值給左右兩個子皮膚留出空間。

CSS清單:

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

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

}

一些說明

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

二列的實現方法

如果是左邊帶有側欄的二欄佈局，則去掉右側欄，不要設定main-wrap的margin-right值，其他操作相同。反之亦然。

e. flex佈局

如果你還沒有學習flex佈局，阮一峰老師的兩篇博文將會很適合你。

阮一峰的部落格——flex語法
 阮一峰的部落格——flex佈局案例

以下是五種佈局的flex佈局程式碼：

DOM文件：

<div class="layout">
    <aside class="layout__aside">側邊欄寬度固定</aside>
    <div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
    <div class="layout__main">主內容欄寬度自適應</div>
    <aside class="layout__aside">側邊欄寬度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左側邊欄寬度固定</aside>
    <div class="layout__main">主內容欄寬度自適應</div>
    <aside class="layout__aside">右側邊欄寬度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1個側邊欄寬度固定</aside>
    <aside class="layout__aside">第2個側邊欄寬度固定</aside>
    <div class="layout__main">主內容欄寬度自適應</div>
</div>
<div class="layout">
    <div class="layout__main">主內容欄寬度自適應</div>
    <aside class="layout__aside">第1個側邊欄寬度固定</aside>
    <aside class="layout__aside">第2個側邊欄寬度固定</aside>
</div>

<aside class="layout__aside">側邊欄寬度固定</aside>