前端一面/面試常考題1-頁面佈局：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px,中間自適應。

題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各爲300px,中間自適應。

【題外話：平常宣讀個人目標===想要成爲一名優雅的程序媛】html

1、分析

1. 題目真的像咱們想得這麼簡單嗎？前端

其實否則，這道題能夠有多種方案，面試官想要經過這個題目考察面試者對CSS的掌握程度，是否善於思考、總結。面試

比較容易想到的兩種方法是：佈局

浮動
絕對定位

但若是隻給出這兩個答案，還沒到及格線。學習

2. 進階flex

flex
table cell
網格佈局---grid

【下文第二部分，有相應的代碼及實現效果演示】flexbox

3. 延伸。面試官極有可能就這個題目延伸出若干問題。spa

這五種方案各自有什麼優勢和缺點？這幾種方案的兼容性如何，若是在作業務的時候，應該選擇哪種方案，哪一個是最實用的？
若是把【假設高度已知】去掉，這五種方案的效果？怎麼解決出現的問題？

【下文第三部分，有關於這幾個問題的參考答案】3d

2、五種方法的代碼實現

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html * {
				padding: 0;
				margin: 0;
			}
			.layout {
				margin-top: 20px;
			}
			.layout article div {
				min-height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 浮動解決方案 -->
		<section class="layout float">
			<style media="screen">
				.layout.float .left {
					float: left;
					width: 300px;
					background: #FFCCCC;
				}
				.layout.float .right {
					float: right;
					width: 300px;
					background: #FF6666;
				}
				.layout.float .center {
					background: #FFFFCC;
				}
			</style>
			<article class="left-right-center">
				<div class="left"></div>
				<div class="right"></div>
				<div class="center">
					<h1>浮動解決方案</h1>
					1.這是三欄佈局中間部分
					2.這是三欄佈局中間部分
				</div>
			</article>
		</section>
		
		<!-- 絕對定位解決方案 -->
		<section class="layout absolute">
			<style>
				.layout.absolute .left{
					position: absolute;
					width: 300px;
					left: 0;
					background: red;
				}
				.layout.absolute .center{
					position: absolute;
					left: 300px;
					right: 300px;
					background: pink;
				}
				.layout.absolute .right{
					position: absolute;
					width: 300px;
					right: 0;
					background: blue;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>絕對定位解決方案</h1>
					1.這是三欄佈局絕對定位中間部分
					2.這是三欄佈局絕對定位中間部分
				</div>
				<div class="right"></div>
			</article>
		</section>
		
		<!-- flexbox 解決方案 -->
		<section class="layout flexbox">
			<style>
				.layout.flexbox {
					margin-top: 150px;
				}
				.layout.flexbox .left-center-right {
					display: flex;
				}
				.layout.flexbox .left{
					width: 300px;
					background: #0000FF;
				}
				.layout.flexbox .center{
					flex: 1;
					background: greenyellow;
				}
				.layout.flexbox .right{
					width: 300px;
					background: blueviolet;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>flexbox 解決方案</h1>
					1.這是三欄佈局flexbox中間部分
					2.這是三欄佈局flexbox中間部分
				</div>
				<div class="right"></div>
			</article>
		</section>
		
		<!-- 表格佈局 -->
		<section class="layout table">
			<style>
				.layout.table .left-center-right{
					width: 100%;
					display: table;
					height: 100px;
				}
				.layout.table .left-center-right>div{
					display: table-cell;
				}
				.layout.table .left{
					width: 300px;
					background: #0000FF;
				}
				.layout.table .center{
					background: #ADFF2F;
				}
				.layout.table .right{
					width: 300px;
					background: #008B8B;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>表格佈局 解決方案</h1>
					1.這是三欄佈局 表格佈局 中間部分
					2.這是三欄佈局 表格佈局 中間部分
				</div>
				<div class="right"></div>
			</article>
		</section>
		
		<!-- 網格佈局 -->
		<section class="layout grid">
			<style>
				.layout.grid .left-center-right{
					display: grid;
					width: 100%;
					grid-template-rows: 100%;
					grid-template-columns: 300px auto 300px;
				}
				.layout.grid .left{
					background: #0000FF;
				}
				.layout.grid .center{
					background: #ADFF2F;
				}
				.layout.grid .right{
					background: #008B8B;
				}
			</style>			
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>網格佈局 解決方案</h1>
					1.這是三欄佈局 網格佈局 中間部分
					2.這是三欄佈局 網格佈局 中間部分
				</div>
				<div class="right"></div>
			</article>
		</section>
	</body>
</html>

3、題目的延伸問題

1. 這五種方案各自有什麼優勢和缺點？這五種方案的兼容性如何，若是在作業務的時候，應該選擇哪種方案，哪一個是最實用的？code

【浮動】

優勢 :兼容性比較好。

缺點 :浮動是脫離文檔流的，若是處理很差，會帶來不少問題。有些時候須要清除浮動，須要很好的處理浮動周邊元素的關係。

【絕對定位】

優勢：快捷。

缺點：佈局脫離文檔流，意味着下面的子元素也要脫離文檔流，致使這個方案的有效性是比較差的。

【flex】

優勢 :比較完美的解決了浮動和絕對定位的問題。在移動端比較經常使用。

缺點 :兼容性比較差，不兼容IE8及如下的版本。由於這個是CSS3中新增的display的屬性值。

【表格佈局】

優勢：兼容性比較好。

缺點：操做繁瑣，對SEO不友好；當某個單元格高度變化時，所在行的其它單元格也會變化。

【網格佈局】

優勢：代碼比較簡單。

缺點：兼容性比較差。

由於是較新的技術，若是在面試時回答出這種方法，能夠必定程度上體現出面試者對新技術的學習和渴望。

2. 若是把【假設高度已知】去掉，這五種方案的效果？怎麼解決出現的問題？

浮動

<!-- 浮動解決方案 -->
		<section class="layout float">
			<style media="screen">
				.layout.float .left {
					float: left;
					width: 300px;
					background: #FFCCCC;
				}
				.layout.float .right {
					float: right;
					width: 300px;
					background: #FF6666;
				}
				.layout.float .center {
					background: #FFFFCC;
				}
			</style>
			<article class="left-right-center">
				<div class="left"></div>
				<div class="right"></div>
				<div class="center">
					<h1>浮動解決方案</h1>
					1.這是三欄佈局中間部分
					2.這是三欄佈局中間部分
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
				</div>
			</article>
		</section>

問題的緣由

由於浮動的基本原理，中間的內容向左浮動的時候，被左邊的塊擋住，因此在中間部分排，當文案超出之後，左側沒有遮擋物，就會溢出。

問題的解決

能夠經過建立BFC的方式解決。

.layout.float .center {
    background: #FFFFCC;
    overflow: hidden;
}

絕對定位

<!-- 絕對定位解決方案 -->
		<section class="layout absolute">
			<style>
				.layout.absolute .left{
					position: absolute;
					width: 300px;
					left: 0;
					background: red;
				}
				.layout.absolute .center{
					position: absolute;
					left: 300px;
					right: 300px;
					background: pink;
				}
				.layout.absolute .right{
					position: absolute;
					width: 300px;
					right: 0;
					background: blue;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>絕對定位解決方案</h1>
					1.這是三欄佈局絕對定位中間部分
					2.這是三欄佈局絕對定位中間部分
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
				</div>
				<div class="right"></div>
			</article>
		</section>

flex、表格佈局、網格佈局

<!-- flexbox 解決方案 -->
		<section class="layout flexbox">
			<style>
				.layout.flexbox {
					margin-top: 280px;
				}
				.layout.flexbox .left-center-right {
					display: flex;
				}
				.layout.flexbox .left{
					width: 300px;
					background: #0000FF;
				}
				.layout.flexbox .center{
					flex: 1;
					background: greenyellow;
				}
				.layout.flexbox .right{
					width: 300px;
					background: blueviolet;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>flexbox 解決方案</h1>
					1.這是三欄佈局flexbox中間部分
					2.這是三欄佈局flexbox中間部分
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
				</div>
				<div class="right"></div>
			</article>
		</section>
		
		<!-- 表格佈局 -->
		<section class="layout table">
			<style>
				.layout.table .left-center-right{
					width: 100%;
					display: table;
					height: 100px;
				}
				.layout.table .left-center-right>div{
					display: table-cell;
				}
				.layout.table .left{
					width: 300px;
					background: #0000FF;
				}
				.layout.table .center{
					background: #ADFF2F;
				}
				.layout.table .right{
					width: 300px;
					background: #008B8B;
				}
			</style>
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>表格佈局 解決方案</h1>
					1.這是三欄佈局 表格佈局 中間部分
					2.這是三欄佈局 表格佈局 中間部分
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
				</div>
				<div class="right"></div>
			</article>
		</section>
		
		<!-- 網格佈局 -->
		<section class="layout grid">
			<style>
				.layout.grid .left-center-right{
					display: grid;
					width: 100%;
					grid-template-rows: 100%;
					grid-template-columns: 300px auto 300px;
				}
				.layout.grid .left{
					background: #0000FF;
				}
				.layout.grid .center{
					background: #ADFF2F;
				}
				.layout.grid .right{
					background: #008B8B;
				}
			</style>			
			<article class="left-center-right">
				<div class="left"></div>
				<div class="center">
					<h1>網格佈局 解決方案</h1>
					1.這是三欄佈局 網格佈局 中間部分
					2.這是三欄佈局 網格佈局 中間部分
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
					<p>增長高度</p>
				</div>
				<div class="right"></div>
			</article>
		</section>

4、頁面佈局小結

答題要點

語義化掌握到位
頁面佈局理解深入
CSS基礎知識紮實
思惟靈活且積極上進
代碼書寫規範

題目的擴展

三欄佈局

左右寬度固定，中間自適應
上下高度固定，中間自適應

兩欄佈局

左寬度固定，右自適應
右寬度固定，左自適應
上寬度固定，下自適應
下寬度固定，上自適應

【說明：這是本人在看了某課網的前端面試視頻作的筆記，歡迎你們糾錯、補充答案】

【個人目標：想要成爲一名優雅的程序媛】