需求： 兩邊固定市埋，中間自適應(yīng)
效果圖
一捐韩、浮動（float）
index.html
// style
<style>
.app{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: aquamarine;
float: right;
}
.main{
height: 200px;
background-color: blueviolet;
margin: 0 200px;
}
</style>
//html
<body>
<div class="app">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
總結(jié)：浮動（float）需要注意頁面布局，main不能在中間;原理利用左右浮動兩塊div元素床未，脫離標(biāo)準(zhǔn)流就缆，中間那塊元素就會上去，跟他們一行尤溜，利用margin留出左右寬度
二倔叼、定位（position）
index.html
// style
<style>
.app{
margin: 0;
padding: 0;
position: relative;
}
.left{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
left: 0;
top: 0;
}
.right{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
right: 0;
top: 0;
}
.main{
height: 200px;
background-color: blueviolet;
margin: 0 200px;
}
</style>
//html
<body>
<div class="app">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
總結(jié)：定位（position）沒有要求布局；原理利用左右定位兩塊div元素宫莱，脫離標(biāo)準(zhǔn)流丈攒，中間那塊元素就會上去，跟他們一行授霸，利用margin留出左右寬度
三巡验、彈性布局（flex）
index.html
// style
<style>
.app{
margin: 0;
padding: 0;
display: flex;
}
.left{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.right{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.main{
height: 200px;
background-color: blueviolet;
flex: 1;
}
</style>
//html
<body>
<div class="app">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
總結(jié)：彈性布局（flex）需要父級元素彈性，中間flex:1碘耳；原理利用flex:1显设，可以自適應(yīng)剩余空間
四、雙飛翼布局
index.html
//style
<style>
.app{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: 200px;
background-color: blueviolet;
float: left;
}
.itemMain{
margin: 0 200px;
color: #FFF;
}
.left{
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
margin-left: -200px;
}
</style>
//html
<body>
<div class="app">
<div class="main">
<div class="itemMain">雙飛翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
總結(jié)：雙飛翼布局個人理解：在div.main元素中添加一個元素辛辨，設(shè)置margin外邊距捕捂；div.left和div.right占的是itemMain的外邊距
五瑟枫、圣杯布局
index.html
//style
<style>
.app{
margin: 0;
padding: 0;
padding: 0 200px;
overflow: hidden;
}
.main{
width: 100%;
height: 200px;
background-color: blueviolet;
position: relative;
float: left;
}
.left{
width: 200px;
height: 200px;
background-color: aquamarine;
position: relative;
float: left;
margin-left: -100%;
left: -200px;
}
.right{
width: 200px;
height: 200px;
background-color: aquamarine;
position: relative;
float: left;
margin-left: -200px;
right: -200px;
}
</style>
//html
<body>
<div class="app">
<div class="main">圣杯布局</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
總結(jié)：圣杯布局個人理解：它是通過設(shè)置padding內(nèi)邊距和position,div.left和div.right占的是itemMain的內(nèi)邊距。它有缺點：瀏覽器無線放大縮小時指攒，布局將混亂
雙飛翼布局和圣杯布局介紹
1.雙飛翼布局：淘寶針對「圣杯」的缺點做了優(yōu)化慷妙，并提出「雙飛翼」布局。
2.圣杯布局：國外的前輩就提出了「圣杯」布局允悦，目的就是通過 css 的方式配合上面的 DOM 結(jié)構(gòu)膝擂，優(yōu)化 DOM 渲染。
優(yōu)點：如果我們希望中部 main 部分優(yōu)先顯示的話隙弛，是可以做布局優(yōu)化的架馋。因為瀏覽器渲染引擎在構(gòu)建和渲染渲染樹是異步的（誰先構(gòu)建好誰先顯示），那么將 <div class="main">main</div>部分提前即可優(yōu)先渲染全闷。
兩邊固定叉寂，中間自適應(yīng)：這里給大家總結(jié)5中常用方法基本夠用
需求： 兩邊自適應(yīng)，中間固定
效果圖
一室埋、box-flex
index.html
// style
<style>
.app{
margin: 0;
padding: 0;
display: -webkit-box;
}
.main{
width: 800px;
height: 200px;
background-color: blueviolet;
}
.left{
height: 200px;
background-color: aquamarine;
-webkit-box-flex:1;
}
.right{
height: 200px;
background-color: aquamarine;
-webkit-box-flex:1;
}
</style>
//html
<body>
<div class="app">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
總結(jié)： box-flex 屬性規(guī)定框的子元素是否可伸縮其尺寸办绝。提示：可伸縮元素能夠隨著框的縮小或擴(kuò)大而縮寫或放大。只要框中有多余的空間姚淆，可伸縮元素就會擴(kuò)展來填充這些空間孕蝉。
二、彈性布局（flex）
index.html
// style
<style>
.app{
margin: 0;
padding: 0;
display:flex;
flex-direction:row;
}
.main{
width: 800px;
height: 200px;
background-color: blueviolet;
}
.left{
flex-grow: 1;
background-color: aquamarine;
}
.right{
flex-grow: 1;
background-color: aquamarine;
}
</style>
// html
<body>
<div class="app">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
總結(jié)：flex-grow 屬性定義項目的擴(kuò)大系數(shù)腌逢，用于分配容器的剩余空間降淮。（可以去看看flex-grow詳解）
三、calc()
index.html
// style
<style>
.app{
margin: 0;
padding: 0;
height:200px;
width: 100%;
}
.main{
float:left;
width: 1000px;
height: 200px;
background-color: blueviolet;
}
.left{
float:left;
height:100%;
width: calc(50% - 500px);
background-color: aquamarine;
}
.right{
float:left;
height:100%;
width: calc(50% - 500px);
background-color: aquamarine;
}
</style>
// html
<body>
<div class="app">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
總結(jié)：calc()：用于動態(tài)計算長度值搏讶，值靈活佳鳖。css3新增功能（可以去看看calc()詳解）
兩邊自適應(yīng)，中間固定：這里給大家總結(jié)3中常用方法基本夠用
感謝閱讀媒惕， 完系吩！
