本篇文章主要介紹本人最近在CSS學(xué)習(xí)中總結(jié)出的常用的二列&三列布局的幾種方法
二列&三列布局：
二列布局的特征通常是側(cè)欄固定寬度，主欄自適應(yīng)寬度
三列布局的特征通常是兩邊側(cè)欄固定寬度，主欄自適應(yīng)寬度
實現(xiàn)方式有以下幾種：
a. 浮動布局
原理：首先分別給兩邊側(cè)欄左右浮動，然后中間主欄設(shè)置左右margin給兩邊側(cè)欄留出空間，主欄自適應(yīng)寬度
DOM文檔：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
CSS文檔:
.left{
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: 200px;
height: 100px;
background-color: green;
}
.main{
height: 100px;
background-color: red;
margin-left: 120px;
margin-right: 220px;
}
說明：
*如果是二列布局，則去掉一邊側(cè)欄，主欄取消那一邊的margin設(shè)置。
*注意DOM順序，要先寫兩邊側(cè)欄，如果先寫主欄的話會將側(cè)欄擠到下一列。
*這種布局的缺點是頁面會首先渲染側(cè)欄再渲染主欄。
b. 絕對定位布局
原理：通過絕對定位將兩邊側(cè)欄固定，同樣中間主欄設(shè)置margin給側(cè)欄騰空間，中間主欄自適應(yīng)。
DOM文檔：
<div class="container">
<div class="main"></div>
<div class="right"></div>
<div class="left"></div>
</div>
CSS文檔：
.container{
position: relative;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
.main{
height: 100px;
background-color: red;
margin-left: 120px;
margin-right: 220px;
}
說明：
*如果是二列布局，則去掉一邊側(cè)欄，主欄取消那一邊的margin設(shè)置。
*瀏覽器窗口小到一定程度時，主欄與側(cè)欄會發(fā)生重疊。
c. 圣杯布局
原理：
首先給主欄和側(cè)欄都加上左浮動，主欄寬度設(shè)置100%，此時左右側(cè)欄均被擠下去；
然后給左側(cè)欄一個margin-left:-100%，左側(cè)欄會從主欄的下面拉到與主欄對齊的左邊，給右側(cè)欄一個margin-left:自身寬度，右側(cè)欄會從主欄的下面拉到與主欄對齊的右邊；
此時左右側(cè)欄會擋住主欄的左右兩邊部分，所以在外層設(shè)置左右padding減小主欄寬度，給兩邊側(cè)欄騰出空間，但是左右側(cè)欄會跟著縮小的主欄一起向中間靠攏。此時使用相對布局，調(diào)整兩個側(cè)欄到相應(yīng)的位置。
DOM文檔：
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS文檔：
.main{
background-color: red;
float: left;
width: 100%;
height: 100px;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: -100%;
position: relative;
left: -100px
}
.right{
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -200px;
position: relative;
right: -200px
}
.container{
padding: 0 200px 0 100px;
}
說明：
*如果是左邊帶有側(cè)欄的二欄布局，則去掉右側(cè)欄，不要設(shè)置主面板的padding-right值，其他操作相同。反之亦然。
*書寫順序不能更改
*當(dāng)主欄寬度小于側(cè)欄寬度時布局會亂，可以設(shè)置主欄的min-width或者使用雙飛翼布局。
d. 雙飛翼布局
原理：與圣杯布局相似，都利用了浮動和負(fù)邊距，但是在main外面加了一層div，由于側(cè)欄的負(fù)邊距是相對這個外層div的，所以給main設(shè)置左右margin是不會影響左右側(cè)欄，也就省去定位的步驟了。
DOM文檔：
<div class="container">
<div class="wrape">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS文檔：
.wrape{
float: left;
width: 100%;
}
.main{
margin: 0 200px 0 100px;
background-color: red;
height: 100px;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: -100%;
/* position: relative;
left: -100px */
}
.right{
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -200px;
/* position: relative;
right: -200px */
}
說明：
*如果是左邊帶有側(cè)欄的二欄布局，則去掉右側(cè)欄，不要設(shè)置main-wrap的margin-right值，其他操作相同。反之亦然。
*解決了圣杯布局main的最小寬度不能小于左側(cè)欄的缺點.
e. flex布局
DOM文檔：
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS文檔：
.container{
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
margin-left: 20px;
height: 300px;
background-color: green;
}
說明：
*如果要實現(xiàn)二列的話，直接去掉單邊側(cè)欄即可。
*傳統(tǒng)布局步驟復(fù)雜繁瑣，而flex布局的flex容器利用實際可用空間動態(tài)地調(diào)整子元素寬高比和順序，簡單實用，但需要考慮瀏覽器的兼容性。
