三欄布局：頁面分為左中右三部分。左右固定吝秕，中間部分自適應泊脐。
1. 絕對定位法
這里的絕對定位是指對左右部分進行絕對定位。
HTML結構烁峭。
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
代碼容客。
//簡單的進行CSS reset
body,html{
height:100%;
padding: 0px;
margin:0px;
}
//左右絕對定位
.left,.right{
position: absolute;
top:0px;
background: red;
height:100%;
}
.left{
left:0;
width:100px;
}
.right{
right:0;
width:200px;
}
//中間使用margin空出左右元素所占據的空間
.main{
margin:0px 200px 0px 100px;
height:100%;
background: blue;
}
// 上述的高度可以不必進行設置，用內容撐開元素高度即可约郁。
height:100%
高度由內容撐開
這種方法有一個弊端缩挑，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素鬓梅，當瀏覽器寬度小到一定程度供置，會發(fā)生層重疊的情況。
中間欄內嵌一個寬度為200的span元素绽快，發(fā)生重疊
2. 圣杯布局
3. 雙飛翼布局
淺談雙飛翼布局和圣杯布局（一）
淺談雙飛翼布局和圣杯布局（二）
淺談雙飛翼布局和圣杯布局（三）
4. 自身浮動法
左欄左浮動芥丧，右欄右浮動，中間欄放最后
DOM結構
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
樣式
.left {
background: red;
float: left;
width: 150px;
}
.right {
background: red;
float: right;
width: 200px;
}
.main {
background: pink;
margin: 0 200px 0 150px;
}
效果
這種方式需要注意三個div的順序坊罢，左右兩欄的順序不分先后续担，但是中間一欄必須放在最后。
優(yōu)點是代碼足夠簡潔與高效活孩，缺點是中間主體存在克星物遇，即clear:both屬性。如果要使用此方法诱鞠，需避免明顯的clear樣式挎挖，且主要內容無法最先加載，當頁面內容較多時會影響用戶體驗航夺。
5. flex布局
DOM結構
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
樣式
.container {
display: flex;
}
.main {
flex-grow: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
flex: 0 1 100px;
margin-left: 20px;
height: 300px;
background-color: green;
}
效果
image.png
6. table布局
DOM結構
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
樣式
.container {
display: table;
width: 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.main {
background-color: blue;
}
.right {
width: 100px;
height: 300px;
background-color: green;
}
缺點：無法設置欄間距
End
差不多總結了網上的幾種主流方法蕉朵，有的太小眾的方法就沒有整理。
CSS3的flex教程還是得好好看一看阳掐。
然后還有浮動啊定位啊負邊距啊什么的始衅，要深入研究的話估計也是很長的學習筆記冷蚂。
CSS真是一門玄學。
