什么是三欄布局卢厂？
三欄布局一般指的是頁(yè)面中一共有三欄赏殃，左右兩欄寬度固定华嘹，中間自適應(yīng)的布局奖地。
三欄布局
實(shí)現(xiàn)方法1. 利用浮動(dòng)
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
注意：中間的自適應(yīng)div要放在最后寫橄唬。
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
}
.wrapper .left{
width: 200px;
height: 400px;
background-color: blueviolet;
float: left;
}
.wrapper .right{
width: 200px;
height: 400px;
background-color: deepskyblue;
float: right;
}
.wrapper .middle{
height: 400px;
background-color: darksalmon;
}
此方法使得中間欄總是最后渲染。
想要優(yōu)先渲染中間欄参歹，可以用到下面的方法仰楚。
方法2. 絕對(duì)定位布局
<div class="wrapper">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
position: relative;
}
.wrapper .left{
width: 200px;
height: 400px;
background-color: blueviolet;
position: absolute;
left: 0;
}
.wrapper .middle{
position: absolute;
left: 200px;
right: 200px;
height: 400px;
background-color: darksalmon;
}
.wrapper .right{
width: 200px;
height: 400px;
background-color: deepskyblue;
position: absolute;
right: 0;
}
方法3.flex布局
html同上
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.wrapper .left{
width: 200px;
order: 1;
background-color: blueviolet;
}
.wrapper .middle{
order: 2;
flex:1;
background-color: darksalmon;
}
.wrapper .right{
width: 200px;
order: 3;
background-color: deepskyblue;
}
圣杯布局
圣杯布局就是一種優(yōu)先渲染中間內(nèi)容的布局。
html：
<div class="wrapper">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css:
a. 假設(shè)我們規(guī)定左側(cè)的固定寬度為200px犬庇，右側(cè)的固定寬度為300px僧界。
.wrapper{
width: 700px;
height: 400px;
padding: 0 300px 0 200px;
margin: 0 auto;
}
得到以下效果
b. 之后我們就要進(jìn)行中間三列的寬度的設(shè)置，同時(shí)進(jìn)行浮動(dòng)的設(shè)置（將中間三列進(jìn)行左浮動(dòng)）臭挽，并且進(jìn)行高度的設(shè)置和定位捂襟。
.middle,.left,.right{
float: left;
position: relative;
height: 400px;
}
c. 我們要在.middle的部分進(jìn)行 width：100%占滿。
.middle{
width: 100%;
background-color: blanchedalmond;
}
d. 此時(shí)我們看到.middle占滿了埋哟，所以我們現(xiàn)在需要做的就是將.left拉到最左邊，我們就要進(jìn)行margin-left:-100%,得到下圖效果郎汪。
e. 在這個(gè)時(shí)候我們可以看到赤赊，雖然我們將.left拉到了左邊，但是他將中間部分的內(nèi)容覆蓋掉了煞赢，所以我們就要使用相對(duì)定位left:-200px抛计。
同理我們也要對(duì).right進(jìn)行絕對(duì)定位.right:-300px
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cornflowerblue;
}
.right{
width: 300px;
margin-left: -300px;
right: -300px;
background-color: darkslateblue;
}
這樣就完成了三欄布局！
圣杯布局
完整css代碼：
.wrapper{
width: 700px;
height: 400px;
padding: 0 300px 0 200px;
margin: 0 auto;
}
.middle,.left,.right{
float: left;
position: relative;
height: 400px;
}
.middle{
width: 100%;
background-color: blanchedalmond;
}
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cornflowerblue;
}
.right{
width: 300px;
margin-left: -300px;
right: -300px;
background-color: darkslateblue;
}
雙飛翼布局
雙飛翼布局其實(shí)和圣杯布局類似照筑，都是為了實(shí)現(xiàn)三欄布局吹截，且中間內(nèi)容部分優(yōu)先展示
不同點(diǎn)就是圣杯布局利用的是 wrapper 的 padding 來(lái)保留左右位置的，而雙飛翼布局利用的是給中間部分（middle）的 margin 來(lái)實(shí)現(xiàn)的凝危，因?yàn)樗窃?middle 的外面再次嵌套了一層 div（middle-wrapper）
html
<div class="wrapper">
<div class="middle-wrapper">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
- 在wrapper 的三列 center-wrapper波俄、left、right分別設(shè)置左浮動(dòng)
- middler-wrapper 的寬度設(shè)置為 100%蛾默，left 和 right 的寬度分別設(shè)置為 200px懦铺、300px ，對(duì) left 設(shè)置 margin-left：-100%支鸡，使其回到上一行的最左邊
- 對(duì) right 使用 margin-left：-300px冬念，使其回到上一行的最右邊，此時(shí)就大功告成
css
.wrapper{
width: 1000px;
height: 400px;
margin: 0 auto;
}
.middle-wrapper,.left,.right{
float: left;
height: 400px;
}
.middle-wrapper{
width: 100%;
background-color: darksalmon;
}
.left{
width: 200px;
margin-left: -100%;
background-color: goldenrod;
}
.right{
width: 300px;
margin-left: -300px;
background-color: darkseagreen;
}
