實(shí)現(xiàn)一個(gè)圣杯布局
圣杯布局是為了討論 三欄液態(tài)布局的實(shí)現(xiàn)
有幾點(diǎn)要求
- 上部（header）和下部（footer）各自占領(lǐng)屏幕所有寬度
- 中間部分（container）是一個(gè)三欄布局
- 三欄布局兩側(cè)寬度不變悯周，中間部分自動(dòng)填充整個(gè)區(qū)域
-
中間部分的高度是三欄中最高的區(qū)域的高度
float 實(shí)現(xiàn)
html 代碼中 middle 部分首先要放在 container 的最前部分，container 的高度保持一致
- 將三者都 float:left , 再加上一個(gè)position:relative (因?yàn)橄鄬Χㄎ缓竺鏁?huì)用到）
- middle部分 width:100%占滿
- 此時(shí)middle占滿了滓技，所以要把left拉到最左邊进每，使用margin-left:-100%
- 這時(shí)left拉回來了偏塞，但會(huì)覆蓋middle內(nèi)容的左端，要把middle內(nèi)容拉出來，所以在外圍container加上 padding:0 220px 0 200px
- middle內(nèi)容拉回來了哪审，但left也跟著過來了饶深，所以要還原餐曹，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220px
- 到這里大概就自適應(yīng)好了敌厘。如果想container高度保持一致可以給left middle right都加上min-height:130px
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>middle-content</p>
</div>
<div class="left">
<h4>left</h4>
<p>left-content</p>
</div>
<div class="right">
<h4>right</h4>
<p>right-content</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
.header, .footer {
border: 1px solid #333;
background: #ccc;
text-align: center;
}
.footer {
clear: both;
}
.container {
padding:0 220px 0 200px;
overflow: hidden;
}
.left, .middle, .right {
position: relative;
float: left;
min-height: 130px;
}
.middle {
width: 100%;
background: blue;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
flex 實(shí)現(xiàn)
用彈性盒子來實(shí)現(xiàn)圣杯布局特別簡單台猴，只需要把中間的部分用flex布局即可。
- header和footer同上面一樣俱两，橫向撐滿饱狂。footer不用再清浮動(dòng)了
- container中的left、middle宪彩、right依次排布即可休讳，不用特意將middle放置到最前面
- 給container設(shè)置彈性布局 display: flex;
- left和right區(qū)域定寬，middle設(shè)置 flex: 1; 即可
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="left">
<h4>left</h4>
<p>left-content</p>
</div>
<div class="middle">
<h4>middle</h4>
<p>middle-content</p>
</div>
<div class="right">
<h4>right</h4>
<p>right-content</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
.header, .footer {
border: 1px solid #333;
background: #ccc;
text-align: center;
}
.container {
display: flex;
}
.left {
width: 200px;
background: red;
}
.middle {
flex: 1;
background: blue;
}
.right {
width: 220px;
background: green;
}
總結(jié)
總的來說毯焕，彈性布局是最適合實(shí)現(xiàn)圣杯布局的方法了衍腥，相較浮動(dòng)，彈性布局的結(jié)構(gòu)更清楚纳猫，更好理解婆咸，也不用擔(dān)心移動(dòng)端的適配問題。
而浮動(dòng)的方法芜辕，在面試中可能會(huì)遇到尚骄，主要考察對布局的理解能力。
圣杯布局的另一個(gè)核心：重要的內(nèi)容先加載侵续。就像本文中的 middle 在前倔丈，left 和 right 在后
雙飛翼布局
聽說雙飛翼布局是玉伯大大提出來的，始于淘寶UED
如果把三欄布局比作一只大鳥状蜗，可以把main看成是鳥的身體需五，sub和extra則是鳥的翅膀。這個(gè)布局的實(shí)現(xiàn)思路是轧坎，先把最重要的身體部分放好宏邮，然后再將翅膀移動(dòng)到適當(dāng)?shù)牡胤?
其實(shí)跟上邊的圣杯布局差不多的，當(dāng)然也可以改動(dòng)一下（自己想想有哪些不同吧）
恩，這里有一只鳥~
左翅sub有200px,右翅extra..220px.. 身體main自適應(yīng)未知
- html代碼中蜜氨，main要放最前邊械筛，sub extra
- 將main sub extra 都float:left
- 將main占滿 width:100%
- 此時(shí)main占滿了，所以要把sub拉到最左邊飒炎，使用margin-left:-100% 同理 extra使用margin-left:-220px
（這時(shí)可以直接繼續(xù)上邊圣杯布局的步驟埋哟，也可以有所改動(dòng)） - main內(nèi)容被覆蓋了吧，除了使用外圍的padding郎汪，還可以考慮使用margin赤赊。
給main增加一個(gè)內(nèi)層div-- main-inner, 然后margin:0 220px 0 200px - main正確展示
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.sub,
.main,
.extra{
float: left;
min-height: 130px;
}
.sub{
margin-left: -100%;
width: 200px;
background: red;
}
.extra{
margin-left: -220px;
width: 220px;
background: blue;
}
.main{
width: 100%;
}
.main-inner{
margin-left: 200px;
margin-right: 220px;
min-height: 130px;
background: green;
word-break: break-all;
}
.footer{
clear: both;
}
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<h4>main</h4>
</div>
</div>
<div class="sub">
<h4>sub</h4>
</div>
<div class="extra">
<h4>extra</h4>
</div>
<div class="footer">
<h4>footer</h4>
</div>
