前端面試必備總結：頁面布局5種解決方案

在一面或者二面中，頁面布局是經常問到的點，昨天在慕課網聽了老師講的課，今天自己敲下代碼整理下。主要解答三欄布局下面兩題目，兩欄布局與三欄布局相似。

1.高度已知，左右寬度固定，使中間自适應。

2.上下高度固定，使中間自适應

1.左右寬度固定，中間自适應

float解決方案

css實作：

html *{
	padding: 0px;
	margin: 0px;
}
.box div{
	min-height: 200px;
}

/*<!-- 1.float方法 -->*/

.partone {
	width: 300px;
	background: pink;
	float: left;
}

.parttwo {
	background: blue;
	color: #ffffff;
	text-align: center;
}

.partthree {
	width: 300px;
	background: orange;
	float: right;
}

html實作：

<article class="box">
	<div class="partone">partone</div>
	<div class="partthree">partthree</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
</article>

效果：

前端面試必備總結：頁面布局5種解決方案

絕對定位方案

css實作：

/*2.絕對定位*/
html *{
	padding: 0px;
	margin: 0px;
}
.box div{
	min-height: 200px;
}

.box {
	position: relative;
}
.partone {
	left: 0px;
	width: 300px;
	background: pink;
	position: absolute;;
}
.parttwo {
	left: 300px;
	right: 300px;
	background: blue;
	color: #ffffff;
	text-align: center;
	position: absolute;
}
.partthree {
	right: 0px;
	width: 300px;
	background: orange;
	position: absolute;
}

html實作：

<article class="box">
	<div class="partone">partone</div>
	<div class="partthree">partthree</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
</article>

效果：

前端面試必備總結：頁面布局5種解決方案

flex彈性布局解決方案

css實作：

/*3.彈性布局flex*/
html *{
	padding: 0px;
	margin: 0px;
}
.box div{
	min-height: 200px;
}

.box {
	display: flex;
}
.partone {
	width: 300px;
	background: pink;
}
.parttwo {
	background: blue;
	color: #ffffff;
	text-align: center;
	flex: 1;
}
.partthree {
	width: 300px;
	background: orange;
}

html實作：

！！！注意這裡partone、parttwo、partthree三部分順序和前兩種的不同！！！

<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>

效果:

前端面試必備總結：頁面布局5種解決方案

grid網格布局解決方案

css實作：

/*4.網格grid布局解決方案*/
html *{
	padding: 0px;
	margin: 0px;
}
.box div{
	min-height: 200px;
}

.box {
	display: grid;
	grid-template-columns: 300px auto 300px;
}
.partone {
	background: pink;
}
.parttwo {
	background: blue;
	color: #ffffff;
	text-align: center;
}
.partthree {
	background: orange;
}

html實作：

！！！注意這裡partone、parttwo、partthree三部分順序和前兩種的不同！！！

<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>

效果:

前端面試必備總結：頁面布局5種解決方案

table表格布局解決方案

css實作：

！這裡要給每個部分設定高度height，上面設定的min-height在table布局中不起作用。！！！
```
/*5..table布局解決方案*/
html *{
	padding: 0px;
	margin: 0px;
}
.box div{
	min-height: 200px;
}
.box {
	width: 100%;
	display: table;
	
}
.box div{
	display: table-cell;
	/*給每個表格設定高度*/
	height: 200px;
}
.partone {
	background: pink;
	width: 300px;
}
.parttwo {
	background: blue;
	color: #ffffff;
	text-align: center;
}
.partthree {
	background: orange;
	width: 300px;
}
           
```
html實作：

！！！注意這裡partone、parttwo、partthree三部分順序和前兩種的不同！！！
```
<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>
           
```
效果:

前端面試必備總結：頁面布局5種解決方案

各方案優缺點：

1.浮動和絕對定位都脫離了文檔流，浮動如果周邊處理得當，相容性就會比較好，絕對定位使用較友善。

2.flex布局是CSS3中新增，就是為了解決浮動和絕對頂對帶來的不足，是一種比較完美的解決方案。

3.網格布局是最新特性，就像是栅格系統。代碼量少。

4.表格布局一旦有一部分高度發生變化，如當表格中内容較多，超出設定高度後，其餘部分都會發生變化，這樣會不符合開發要求，使用者體檢也不好。

5.上述題目，當高度未知時，隻有flex布局和table布局通用。

2.上下寬度固定，中間自适應

這種上中下三欄布局在移動端較為多見。

絕對定位方案

css實作：

/*1.絕對定位 各部分要設定寬度*/
html *{
	padding: 0px;
	margin: 0px;
}
.partone {
	top: 0;
	height: 100px;
	width: 100%;
	background: pink;
	position: absolute;
}
.parttwo {
	bottom: 100px;
	top: 100px;
	width: 100%;
	background: blue;
	color: #ffffff;
	text-align: center;
	position: absolute;
}
.partthree {
	bottom: 0;
	height: 100px;
	width: 100%;
	background: orange;
	position: absolute;
}

html實作：

<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>

效果:

前端面試必備總結：頁面布局5種解決方案

flex彈性布局解決方案

css實作：

/*2.flex方法*/
html *{
	padding: 0px;
	margin: 0px;
}
html,body{
	/*很重要，這步不設定高度，下面box高度100%不會起作用*/
	height: 100%;
}
.box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.partone {
	height: 100px;
	background: pink;
}
.parttwo {
	flex: 1;
	background: blue;
	color: #ffffff;
	text-align: center;
}
.partthree {
	height: 100px;
	background: orange;
}

html實作：

<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>

效果:

前端面試必備總結：頁面布局5種解決方案

grid網格布局解決方案

css實作：

/*3.網格grid方法*/
html *{
	padding: 0px;
	margin: 0px;
}
html,body{
	/*很重要，這步不設定高度，下面box高度100%不會起作用*/
	height: 100%;
}
.box {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 100px auto 100px;
}
.partone {
	background: pink;
}
.parttwo {
	background: blue;
	color: #ffffff;
	text-align: center;
}
.partthree {
	background: orange;
}

html實作：

<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>

效果:

前端面試必備總結：頁面布局5種解決方案

table表格布局解決方案

css實作：

/*4.table布局*/
html *{
	padding: 0px;
	margin: 0px;
}
html,body{
	/*很重要，這步不設定高度，下面box高度100%不會起作用*/
	height: 100%;
}
.box {
	width: 100%;
	height: 100%;
	display: table;
}
.partone {
	display: table-row;
	background: pink;
	height: 100px;
}
.parttwo {
	display: table-row;
	background: blue;
	color: #ffffff;
	text-align: center;
}
.partthree {
	display: table-row;
	background: orange;
	height: 100px;
}

html實作：

！！特别說明：table布局每部分要有内容背景顔色才會顯示。！！！

<article class="box">
	<div class="partone">partone</div>
	<div class="parttwo">
		<h2>頁面布局</h2>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
		<p>中間自适應解決方案</p>
	</div>
	<div class="partthree">partthree</div>
</article>

效果:

前端面試必備總結：頁面布局5種解決方案

前端面試必備總結：頁面布局5種解決方案

1.左右寬度固定，中間自适應

2.上下寬度固定，中間自适應

不怕挑戰、不怕困難、勇往直前、這些都是成長的機會。

繼續閱讀

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

測試理論面試題

軟體測試面試題整理

tab滑鼠經過菜單切換

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

軟體測試工程師跳槽：收到面試電話後，我會做的事。

layui多任務上傳添加進度條