三欄自適應布局：左右寬度300px倡蝙，中間寬度自適應，整體高度自適應
1）絕對定位法
???????左右兩邊使用absolute定位绞佩，絕對定位會使其脫離正常文檔流寺鸥，中間部分會自然流動到他們上面，因此需要使用margin屬性品山，留出左右元素的寬度胆建，這樣就使得中間元素可以自適應屏幕寬度；
???????該布局的優(yōu)點：三個div順序可以任意改變肘交，不足是因為絕對定位笆载，如果頁面上還有其他內(nèi)容，top的值需要小心處理涯呻，最好能夠?qū)ss樣式進行一個初始化凉驻，如果不對樣式進行初始化，則兩邊和中間的值可能會對不齊复罐；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left,.right{
position: absolute;
width: 300px;
top:0;
}
.left{
left:0;
background: red;
}
.center{
margin: 0 300px;
background: pink;
}
.right{
right: 0;
background: blue;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="center">中間</div>
<div class="right">右邊</div>
</body>
</html>
2）圣杯布局：
???????原理是margin負值法涝登，使用圣杯布局首先需要在center元素外部包含一個div，包含div需要設置float屬性使其成為一個BFC效诅，并且其寬度要和left塊的margin負值進行配合胀滚；布局中間部分一定要放在前面趟济，左右順序不限制，對于left塊的margin負值一定要等于wrap的寬度咽笼；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.left,.right{
float: left;
width: 300px;
}
.left{
margin-left: -100%;
background: red;
}
.center{
margin: 0 300px;
background: pink;
}
.right{
margin-left: -300px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">中間</div>
</div>
<div class="left">左邊</div>
<div class="right">右邊</div>
</body>
</html>
3）自身浮動法：
???????對左右使用float:left和float:right使左右兩個元素脫離文檔流顷编，中間元素在正常文檔流中，使用margin指定左右外邊距對其進行一個定位褐荷，該布局的好處是受外界影響小勾效，但是不足的是三個元素的順序，center一定要放在最后叛甫，這是和絕對定位不一樣的地方层宫，center占據(jù)文檔流位置，所以一定要放在最后其监，左右兩個元素位置沒有關(guān)系萌腿，當瀏覽器很小的時候，右邊元素會被擊到下一行抖苦；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left,.right{
width: 300px;
}
.left{
float: left;
background: red;
}
.right{
float: right;
background: blue;
}
.center{
margin: 0 300px;
background: pink;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="right">右邊</div>
<div class="center">中間</div>
</body>
</html>
5）flex法：
???????在外層包裹一層div毁菱，設置為display:flex;中間設置flex:1;但是盒模型默認緊緊挨著，可以使用margin控制外邊距锌历，center一定要放到中間贮庞；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
}
.left,.right {
width: 300px;
background: red;
}
.right {
background: green;
}
.center {
flex: 1;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左邊</div>
<div class="center">中間</div>
<div class="right">右邊</div>
</div>
</body>
</html>
三欄布局
兩欄自適應布局：
1）絕對定位法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
position: absolute;
left: 0;
width: 300px;
background: red;
top: 0;
}
.right {
background: green;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="right">右邊</div>
</body>
</html>
2）圣杯布局：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
float: left;
}
.left {
float: left;
margin-left: -100%;
width: 300px;
background: red;
}
.right {
background: green;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="right">右邊</div>
</div>
<div class="left">左邊</div>
</body>
</html>
3）自身浮動法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
background: red;
}
.right {
background: green;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="left">左邊</div>
<div class="right">右邊</div>
</body>
</html>
4）flex方法；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
}
.left {
width: 300px;
background: red;
}
.right {
flex: 1;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
</body>
</html>
兩欄布局
