假設高度已知，請寫出三欄佈局，左欄、右欄寬度300px，中間寬度自適應。 html
這道題自己的難度並不大，咱們在佈局頁面的時候，寫個三欄佈局仍是挺簡單的。可是若是在面試的時候遇到這道題，就沒有那麼簡單了。看似簡單的一道題，想把它答好是不簡單的。每每越簡單的題越很差答。若是看到這題只想到了浮動和絕對定位，那這題你連及格都及格不了。css3
下面是5種三欄佈局的方法。
在寫佈局代碼以前，先寫兩段公共的樣式，此段寫在頭部。面試
樣式
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
</style>
1. 浮動佈局
<!--浮動佈局 -->
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
</style>
<h1>三欄佈局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮動解決方案</h2>
1.這是三欄佈局的浮動解決方案；
2.這是三欄佈局的浮動解決方案；
</div>
</article>
</section>
浮動佈局是有侷限性的，浮動元素是脫離文檔流，要作清除浮動，這個處理很差的話，會帶來不少問題，好比高度塌陷等。
浮動佈局的優勢就是比較簡單，兼容性也比較好。只要清除浮動作的好，是沒有什麼問題的。
延伸：你知道哪些清除浮動的方案？每種方案的有什麼優缺點?瀏覽器
2.絕對定位佈局
<!-- 絕對佈局 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
</style>
<h1>三欄佈局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>絕對定位解決方案</h2>
1.這是三欄佈局的絕對定位解決方案；
2.這是三欄佈局的絕對定位解決方案;
</div>
<div class="right"></div>
</article>
</section>
絕對定位佈局優勢，很快捷，設置很方便，並且也不容易出問題，你能夠很快的就能想出這種佈局方式。 佈局
缺點就是，絕對定位是脫離文檔流的，意味着下面的全部子元素也會脫離文檔流，這就致使了這種方法的有效性和可以使用性是比較差的。post
3.flex佈局
<!-- flexbox佈局 -->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<h1>三欄佈局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解決方案</h2>
1.這是三欄佈局的felx解決方案；
2.這是三欄佈局的flex解決方案；
</div>
<div class="right"></div>
</article>
</section>
felxbox佈局是css3裏新出的一個，它就是爲了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的佈局也都是用flexbox。
felxbox的缺點就是不能兼容IE8及如下瀏覽器。學習
4.表格佈局
<!-- 表格佈局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<h1>三欄佈局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格佈局解決方案</h2>
1.這是三欄佈局的表格解決方案；
2.這是三欄佈局的表格解決方案;
</div>
<div class="right"></div>
</article>
</section>
表格佈局在歷史上遭到不少人的摒棄，說表格佈局麻煩，操做比較繁瑣，其實這是一種誤解，在不少場景中，表格佈局仍是很適用的，好比這個三欄佈局，用表格佈局就輕易寫出來了。還有表格佈局的兼容性很好，在flex佈局不兼容的時候，能夠嘗試表格佈局。
表格佈局也是有缺陷的，當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一塊兒變高的，而有時候這種效果不是咱們想要的。flex
5.網格佈局
<!-- 網格佈局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{
}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<h1>三欄佈局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>網格佈局解決方案</h2>
1.這是三欄佈局的網格佈局解決方案；
2.這是三欄佈局的網格佈局解決方案;
</div>
<div class="right"></div>
</article>
</section>
網格佈局也是新出的一種佈局方式，若是你答出這種方式，也就證實了你的實力，證實你對技術熱點是有追求的，也說明你有很強的學習能力。flexbox
效果圖
這五種解決方案應該是最多見的三欄佈局，若是你還有其餘的方案，歡迎補充！
最後這個問題還有不少延伸問題的，好比，
- 高度已知換爲高度未知呢？
- 塊內內容超出會是怎樣的效果？
- 若是是上下高度已知，中間自適應呢？
- 若是是兩欄佈局呢？
- 若是是上下左右混合佈局呢？
以上幾個延伸你可否輕鬆應對，若是絕對還有欠缺，儘早查缺補漏吧！
歡迎補充！