參考：
https://www.cnblogs.com/depsi/p/5097013.html
https://blog.csdn.net/qq_40072782/article/details/82927573
一君仆、兩欄布局：左側(cè)定寬蛛芥，右側(cè)自適應(yīng)
方法一：利用絕對(duì)定位
右側(cè)設(shè)置絕對(duì)定位，將其從文檔流中刪除墨榄，為其設(shè)置100%的寬度和left的值（為左側(cè)定寬留出位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
width: 200px;
background-color: green;
}
.content{
position: absolute;
left: 200px;
right: 0;
top: 0;
background-color: red;
}
</style>
</head>
<body>
<div class="content">右側(cè)主體自適應(yīng)區(qū)塊</div>
<div class="sitebar">左側(cè)定寬200px區(qū)塊</div>
</body>
</html>
方法二：浮動(dòng)法(和后面三列的思路一樣)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sitebar{
float: left;
width: 200px;
background-color: green;
}
.content{
background-color: red;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="sitebar">左側(cè)定寬200px區(qū)塊</div>
<div class="content">右側(cè)主體自適應(yīng)區(qū)塊</div>
</body>
</html>
優(yōu)點(diǎn)：代碼簡(jiǎn)潔草冈，便于理解
缺點(diǎn)：不利于頁(yè)面優(yōu)化试和，右側(cè)主內(nèi)容區(qū)后加載
方法三：margin負(fù)值法
該方法在網(wǎng)站布局中非常常見正罢，也是面試撤フ考點(diǎn)映胁，優(yōu)點(diǎn)是三欄相互關(guān)聯(lián)木羹，有一定的抗性。
要求：在middle外部再加一個(gè)div解孙。此div需要設(shè)置float屬性使其形成一個(gè)BFC坑填，并設(shè)置寬度，并且這個(gè)寬度要和left弛姜、right塊的margin負(fù)值進(jìn)行配合脐瑰。看代碼吧
方法四：css3新屬性flex方法
寫一個(gè)<div>廷臼，在flex中類似于容器苍在，
將left、right荠商、middle全部包進(jìn)去
并設(shè)div的display：flex寂恬。
middle塊的樣式中加上flex：1（或者auto）
三列布局
方法一：利用絕對(duì)定位：左右兩列固定寬度，使用絕對(duì)定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自適應(yīng)布局 左右絕對(duì)定位absolute</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.left{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 0;
left: 0; //注意這里
}
.right{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
right: 0; //注意這里
}
.middle{
height: 200px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
方法二：浮動(dòng)法
浮動(dòng)法的原理：
對(duì)左右塊使用分別使用float:left和float:right莱没，float使左右兩個(gè)元素脫離文檔流初肉，中間元素在正常文檔流中。
注意：
middle位置要求：middle塊一定要放在left和right之后饰躲，因?yàn)樗紦?jù)文檔流位置牙咏，所以一定要放在最后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自適應(yīng)布局 左右絕對(duì)定位absolute</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.left{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
.right{
width: 200px;
height: 200px;
background: blue;
float: right;
}
.middle{
height: 200px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>
方法三：margin負(fù)值法
該方法在網(wǎng)站布局中非常常見，也是面試赤诹眩考點(diǎn)妄壶，優(yōu)點(diǎn)是三欄相互關(guān)聯(lián)，有一定的抗性焦蘑。
要求：在middle外部再加一個(gè)div。此div需要設(shè)置float屬性使其形成一個(gè)BFC盒发，并設(shè)置寬度例嘱，并且這個(gè)寬度要和left、right塊的margin負(fù)值進(jìn)行配合宁舰∑绰眩看代碼吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.main{
width: 100%;
height: 200px;
background: blue;
float: left; /*記得是包含middle外層的div設(shè)置浮動(dòng)*/
}
.left{
width: 200px;
height: 200px;
background: yellow;
float: left;
margin-left: -100%; /*-100%是因?yàn)橄鄬?duì)來(lái)說(shuō)它偏移到下一行去了*/
}
.right{
width: 300px;
height: 200px;
background: blue;
float: left;
margin-left: -300px; /*這里要設(shè)置成right寬度的負(fù)值*/
}
.middle{
height: 200px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
方法四：css3新屬性flex方法
寫一個(gè)<div>，在flex中類似于容器蛮艰，
將left腋腮、right、middle全部包進(jìn)去
并設(shè)div的display：flex。
middle塊的樣式中加上flex：1（或者auto）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自適應(yīng)布局 css3新屬性flex方法</title>
<style type="text/css">
#box{
width: 100%;
height: 200px;
display: flex;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
flex: auto; /* flex屬性是flex-grow（項(xiàng)目放大比例）, flex-shrink（縮小比例） 和 flex-basis的簡(jiǎn)寫即寡，默認(rèn)值為0 1 auto徊哑。后兩個(gè)屬性可選*/
background: skyblue;
}
</style>
</head>
<body>
<!-- 寫一個(gè)的div包含left、right聪富、middle莺丑，設(shè)置為display：flex；并將middle設(shè)置flex：1墩蔓； -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>
