1.flex布局
思路：將父元素box設為display:flex;可將box設置為彈性盒模型進行布局（如果對flex不了解，可點擊打開鏈接學習）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:100%;
height:100px;
display:flex;
margin:10px;
}
#left,#right{
width:200px;
height:100px;
margin:10px;
background-color:#999;
}
#center{
flex:1;
height:100px;
margin:10px;/*左右margin不會疊加*/
background-color:#f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
2.利用浮動（float）
讓左右元素浮動，缺點是中間元素必須置於二者之后，不然right元素會進入下一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left,.right{
width:200px;
height:200px;
background-color:#999;
}
.left{
float:left;
}
.right{
float:right;
}
.center{
margin:0 200px;
height:300px;
background-color:#f00;
}
</style>
</head>
<body>
<!--該布局法的好處是受外界影響小，但是不足是 三個元素的順序，center一定要放在最后，這是
和絕對定位不一樣的地方，center占據文檔流位置，所以一定要放在最后，左右兩個元素位置沒有關系。
當瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。-->
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>
3.利用絕對定位（position）
center居中並利用margin為左右兩邊留出位置，左右絕對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三列布局</title>
<style type="text/css">
/*左右固定，中間自適應 利用絕對定位*/
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: black;
color:#fff;
}
.center{
/*width: auto;*/ /*如果沒有這一句，那么，center這個div的文字就不會自動換行*/
margin: 0 400px;
height: 400px;
background-color: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
4.聖杯布局和雙飛翼布局
聖杯布局和雙飛翼布局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文檔流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖杯布局是中間欄在添加相對定位，並配合left和right屬性，效果上表現為三欄是單獨分開的（如果可以看到空隙的話），而雙飛翼布局是在中間欄的div中嵌套一個div，內容寫在嵌套的div里，然后對嵌套的div設置margin-left和margin-right，效果上表現為左右兩欄在中間欄的上面，中間欄還是100%寬度，只不過中間欄的內容通過margin的值顯示在中間。
效果簡圖如下：
1、聖杯布局
注意middle寫在前面就行了，dom結構如下：
DOM: <body> <div id="hd">header</div> <div id="bd">
<div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div>
<div id="footer">footer</div> </body>
相對應的CSS內容如下：
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右欄通過添加負的margin放到正確的位置了，此段代碼是為了擺正中間欄的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左欄上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中間欄的位置擺正之后，左欄的位置也相應右移，通過相對定位的left恢復到正確位置*/
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中間欄的位置擺正之后，右欄的位置也相應左移，通過相對定位的right恢復到正確位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
</style>
2、雙飛翼布局
DOM代碼如下：
<body> <div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body>
雙飛翼布局是在middle的div里又插入一個div，通過調整內部div的margin值，實現中間欄自適應，內容寫到內部div中。
CSS代碼如下：
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左欄上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*給內部div添加margin，把內容放到中間欄，其實整個背景還是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*記得清楚浮動*/
height:50px;
background: #666;
text-align: center;
}
</style>