前端面试必备总结：页面布局5种解决方案

小咪咪 2021-12-11 02:07 427阅读 0赞

在一面或者二面中，页面布局是经常问到的点，昨天在慕课网听了老师讲的课，今天自己敲下代码整理下。主要解答三栏布局下面两题目，两栏布局与三栏布局相似。

1.高度已知，左右宽度固定，使中间自适应。

2.上下高度固定，使中间自适应

## 1.左右宽度固定，中间自适应 ##

1.  **float解决方案**
    
    css实现：
    
        html *{ 
        	padding: 0px;
        	margin: 0px;
        }
        .box div{ 
        	min-height: 200px;
        }
        
        /**/
        
        .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>
    
    效果：
    
    ![效果1][1]
2.  **绝对定位方案**
    
    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>
    
    效果：
    
    ![效果1][1]
3.  **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>
    
    效果:
    
    ![flex][]
4.  **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>
    
    效果:
    
    ![grid][]
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>
    
    效果:
    
    ![table][]
    
    各方案优缺点：
    
    1.浮动和绝对定位都脱离了文档流，浮动如果周边处理得当，兼容性就会比较好，绝对定位使用较方便。
    
    2.flex布局是CSS3中新增，就是为了解决浮动和绝对顶对带来的不足，是一种比较完美的解决方案。
    
    3.网格布局是最新特性，就像是栅格系统。代码量少。
    
    4.表格布局一旦有一部分高度发生变化，如当表格中内容较多，超出设定高度后，其余部分都会发生变化，这样会不符合开发要求，用户体检也不好。
    
    5.上述题目，当高度未知时，只有flex布局和table布局通用。

## 2.上下宽度固定，中间自适应 ##

这种上中下三栏布局在移动端较为多见。

1.  **绝对定位方案**
    
    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>
    
    效果:
    
    ![上下三栏布局效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]
2.  **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>
    
    效果:
    
    ![上下三栏布局效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]
3.  **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>
    
    效果:
    
    ![上下三栏布局效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]
4.  **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>
    
    效果:
    
    ![上下三栏布局效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

## 不怕挑战、不怕困难、勇往直前、这些都是成长的机会。 ##

[1]: /images/20211210/586dd24c1b694654a0f362fa751fe5ec.png
[flex]: /images/20211210/547018d9f9614e8a9887d7ea8a857464.png
[grid]: /images/20211210/63c4355e3da240dfa32577a5692cde75.png
[table]: /images/20211210/8fd4f71ad79c4ec68674a31c9e985674.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20211210/10bf9fb8e30040058713a4da446ec9af.png