題目：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局董栽，其中左欄码倦、右欄寬度各為300px；中間自適應(yīng)锭碳。
屏幕快照 2018-03-25 上午11.28.45.png
我這邊總結(jié)了五種方法袁稽，如有不正確，歡迎批評(píng)指正～
- 浮動(dòng)
- 絕對(duì)定位
- flex布局
- 表格布局
- 網(wǎng)格布局
一擒抛、浮動(dòng)
<section class="layout float">
<style media="screen">
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.float .left {
float: left;
background: red;
width: 300px;
}
.layout.float .right {
float: right;
background: blue;
width: 300px;
}
.layout.float .center {
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮動(dòng)布局</h2>
1推汽、浮動(dòng)布局左右固定寬度补疑，中間自適應(yīng)
2、浮動(dòng)布局左右固定寬度歹撒，中間自適應(yīng)
</div>
</article>
</section>
二莲组、絕對(duì)定位
<section class="layout position">
<style media="screen">
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.position .left-center-right>div {
position: absolute;
}
.layout.position .left {
left: 0;
width: 300px;
background: red;
}
.layout.position .right {
right: 0;
width: 300px;
background: blue;
}
.layout.position .center {
left: 300px;
right: 300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>絕對(duì)定位</h2>
1、定位布局左右固定寬度暖夭，中間自適應(yīng)
2锹杈、定位布局左右固定寬度，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
三迈着、flex布局
<section class="layout flex">
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.flex .left-center-right {
display: flex;
}
.layout.flex .left {
width: 300px;
background: red;
}
.layout.flex .center {
flex: 1;
background: yellow;
}
.layout.flex .right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flex布局</h2>
1嬉橙、flex布局左右固定寬度，中間自適應(yīng)
2寥假、flex布局左右固定寬度市框，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
四、表格布局
<section class="layout table">
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.table .left-center-right {
display: table;
height: 100px;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
background: red;
width: 300px;
}
.layout.table .center {
background: yellow;
}
.layout.table .right {
background: blue;
width: 300px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>tabale布局</h2>
1糕韧、table布局左右固定寬度枫振，中間自適應(yīng)
2、table布局左右固定寬度萤彩，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
五粪滤、網(wǎng)格布局
<section class="layout grid">
<style media="screen">
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>網(wǎng)格布局</h2>
1、網(wǎng)格布局左右固定寬度雀扶，中間自適應(yīng)
2杖小、網(wǎng)格布局左右固定寬度，中間自適應(yīng)
</div>
<div class="right"></div>
</article>
</section>
總結(jié)
- 這五種解決方案各自的優(yōu)缺點(diǎn)愚墓；
- 浮動(dòng)：缺點(diǎn)浮動(dòng)是脫離文檔流的予权，需要做清浮動(dòng)處理；優(yōu)點(diǎn)是兼容性很好浪册。
- 絕對(duì)定位：缺點(diǎn)是布局脫離文檔流扫腺，子元素也必須脫離文檔流，可使用用性比較差村象；優(yōu)點(diǎn)是快捷笆环，不容易出問(wèn)題。
- flex布局：為解決以上兩種布局方式的不足而出現(xiàn)的厚者，比較完美躁劣，現(xiàn)在移動(dòng)端基本都屬于flex布局。
- 表格布局：缺點(diǎn)是操作繁瑣库菲，對(duì)seo也不友好账忘，當(dāng)其中一個(gè)單元格的高度變大時(shí)，其他單元格的高度也會(huì)隨之變大，優(yōu)點(diǎn)是兼容性非常好闪萄。
- 網(wǎng)格布局：缺點(diǎn)是新出的技術(shù)，低版本瀏覽器兼容性不是很好奇颠，優(yōu)點(diǎn)是可以做許多復(fù)雜的事情败去，但是代碼量要簡(jiǎn)化的多。
- 當(dāng)高度不定時(shí)烈拒，兩側(cè)的高度也跟這中間的高度撐開(kāi)圆裕，以上五種有哪幾種可以繼續(xù)用，哪幾種不能用了荆几；
<article class="left-center-right">
<div class="left"></div>
<div class="center">
1吓妆、網(wǎng)格布局左右固定寬度，中間自適應(yīng)
2吨铸、網(wǎng)格布局左右固定寬度行拢，中間自適應(yīng)
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
</div>
<div class="right"></div>
</article>
- 通過(guò)看效果：浮動(dòng)和絕對(duì)定位以及網(wǎng)格布局是不能用的，flex布局和表格布局可以繼續(xù)使用诞吱。
- 在這個(gè)面試過(guò)程中一定要說(shuō)出哪個(gè)能用舟奠，哪個(gè)不能用，以及不能用的原因房维。
- 浮動(dòng)可以延伸到BFC沼瘫，可以去了解BFC相關(guān)的知識(shí)；
- 兼容性咙俩；如果現(xiàn)在要在業(yè)務(wù)中實(shí)現(xiàn)耿戚，你覺(jué)得最優(yōu)選擇時(shí)哪種；
頁(yè)面布局小結(jié)
- 語(yǔ)義化掌握要到位
- 頁(yè)面布局理解深刻
- CSS基礎(chǔ)知識(shí)扎實(shí)
- 思維靈活且積極上進(jìn)（對(duì)新技術(shù)的了解阿趁，如網(wǎng)格布局）
- 代碼書(shū)寫(xiě)規(guī)范
