頁面布局
題目1：三欄布局度帮，中間自適應(yīng)煞檩，左右兩欄固定寬度300px
寫出3種方案算是及格
給出5種方案，不管使用哪種方案啥寇，最終效果都是：
首先寫出html結(jié)構(gòu)：
<div class="wrapper">
<div class="left">zuo</div>
<div class="center">左右兩列固定偎球，中間自適應(yīng)</div>
<div class="right">you</div>
</div>
方案一：float
優(yōu)點(diǎn)：兄弟元素和父元素的浮動(dòng)影響處理的好的話，就是比較簡(jiǎn)單辑甜，兼容性也比較好衰絮。
缺點(diǎn)：浮動(dòng)是脫離文檔流的，常見的問題是清除浮動(dòng)磷醋。清除不好會(huì)帶來很多問題猫牡，比如高度塌陷等。
.wrapper {
overflow: hidden;
}
.left {
float: left;
width: 300px;
background: pink;
}
.right {
float: right;
width: 300px;
background: pink;
}
.center {
margin: 0 300px;
background: gray;
}
以上css樣式設(shè)置完成后子檀，效果是這樣子的：
為什么會(huì)出現(xiàn)這種情況呢镊掖？？褂痰？這是因?yàn)?br> html結(jié)構(gòu)要改成這樣：
<div class="wrapper">
<div class="left">zuo</div>
<div class="right">you</div>
<div class="center">左右兩列固定亩进，中間自適應(yīng)</div>
</div>
延伸：你知道哪些清除浮動(dòng)的方案？每種方案的有什么優(yōu)缺點(diǎn)?
方案二：absolute
左右兩欄absolute缩歪，中間欄設(shè)置margin值归薛。
優(yōu)點(diǎn)：思路簡(jiǎn)單，不容易出問題
缺點(diǎn)：絕對(duì)定位是脫離文檔流的，意味著所有的子元素也必須脫離文檔流主籍；代碼較多习贫，可使用性差。
.wrapper {
position:relative;
}
.left {
position:absolute;
top:0;
left:0;
width: 300px;
background: pink;
}
.right {
position:absolute;
top:0;
right:0;
width: 300px;
background: pink;
}
.center {
margin:0 300px;
background: gray;
}
方案三：flex布局
優(yōu)點(diǎn)：相對(duì)完美的方案千元。
缺點(diǎn)：不兼容IE8及以下瀏覽器苫昌，而且三欄同時(shí)增高。
.wrapper {
display:flex;
}
.left,.right {
flex:0 0 300px;
width: 300px;
background: pink;
}
.center {
flex:1;
background: gray;
}
方案四：table布局
優(yōu)點(diǎn)：兼容性好幸海，適用于很多場(chǎng)景祟身。在flex布局不兼容的時(shí)候，可以使用table布局物独。
缺點(diǎn)：處于一行的單元格table-cell會(huì)同時(shí)增高袜硫，有時(shí)我們并不想要這種效果。
.wrapper {
display:table;
width:100%; //撐滿整個(gè)屏幕的寬
}
.wrapper >div{
display:table-cell;
}
.left,.right {
width: 300px;
background: pink;
}
.center {
background: gray;
}
方案五：grid布局
優(yōu)點(diǎn)：新的技術(shù)挡篓，代碼量簡(jiǎn)化
缺點(diǎn)：瀏覽器對(duì)其支持很弱婉陷，而且三欄同時(shí)增高
步驟：
- 設(shè)置display的值為grid，聲明容器是一個(gè)網(wǎng)格容器
- 設(shè)置網(wǎng)格行和列官研，我們可以通過grid-template-columns和grid-template-rows
教程--->>>CSS Grid布局：快速入門
.wrapper {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left, .right {
background: pink;
}
.center {
background: gray;
}
延伸提問
答完題后秽澳，面試官會(huì)延伸提問
1）5中方案各自的優(yōu)缺點(diǎn)
2）如果考慮縱向，哪種方案就不再適用
-
當(dāng)高度未知時(shí)
使用flex布局阀参、table布局和grid布局肝集，當(dāng)我們中間欄的高度隨著內(nèi)容增加時(shí)，其他兩欄也同時(shí)增高蛛壳。效果：
-
當(dāng)高度已知時(shí)
flex布局杏瞻、table布局仍然會(huì)同時(shí)增高，而grid布局中間的內(nèi)容會(huì)溢出來衙荐，效果：
3）5種方案的兼容性捞挥，哪種是最優(yōu)的方案？
顯然是flex布局忧吟、table布局砌函。
題目2：上下兩欄固定，中間滾動(dòng)
上下高度固定溜族，中間自適應(yīng)：APP用的非常多讹俊，上邊是header，中間是內(nèi)容煌抒，隨著內(nèi)容的增多會(huì)出現(xiàn)滾動(dòng)條仍劈，下邊是導(dǎo)航，比如美團(tuán)寡壮、淘寶贩疙、京東讹弯。
先來看一下效果：
首先寫出html結(jié)構(gòu)：
<div class="wrapper">
<div class="header">header</div>
<div class="content">
上下兩欄固定，中間滾動(dòng)<br/>
上下兩欄固定这溅，中間滾動(dòng)<br/>
<!-- 此處省略n個(gè)-->
</div>
<div class="footer">footer</div>
</div>
方案一：使用position
.wrapper {
position:relative;
height: 100%;
}
.header {
height: 100px;
background: pink;
}
.content {
position:absolute;
top:100px;
bottom:25px;
overflow: auto;
width:100%;
background: green;
}
.footer {
position:fixed;
left:0;
bottom:0;
width:100%;
height: 25px;
background: grey;
}
這里需要說明的是：凡是給元素position為absolute/fixed和float后组民，元素脫離文檔流后會(huì)導(dǎo)致無法計(jì)算自己的寬度和高度，display屬性會(huì)隱式的變?yōu)閕nline-block悲靴，所以需要設(shè)置width臭胜。注意一點(diǎn)的是，position:relative并不能夠改變display的類型对竣。
如果不支持 position:fixed 庇楞，可以用position:absolute;來替代。
方案二：flex布局
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
height: 100px;
background: pink;
}
.content {
flex: 1;
overflow: auto;//滾動(dòng)條
background: green;
}
.footer {
height: 25px;
background: grey;
}
方案三：grid布局
.wrapper {
display:grid;
grid-template-rows: 100px auto 25px;
height: 100%;
}
.header {
background: pink;
}
.content {
overflow: auto;
background: green;
}
.footer {
background: grey;
}
方案四：calc()函數(shù)
你認(rèn)識(shí)calc()函數(shù)嗎否纬？這貨其實(shí)就是一個(gè)計(jì)算長(zhǎng)度值的。
.wrapper {
height: 100%;
}
.header {
height: 100px;
background: pink;
}
.content {
height: calc(100% - 100px - 25px);
overflow: auto;
background: green;
}
.footer {
height: 25px;
background: grey;
}
