面试知识点--页面布局（前端）

页面布局

三栏布局

• 左右宽度固定，中间自适应
• 上下高度固定，中间自适应

两栏布局

• 左宽度固定，右自适应
• 右宽度固定，左自适应
• 下宽度固定，上自适应
• 上宽度固定，下自适应

案例：请根据题目给出多个中间自适应解决方案

浮动布局

脱离文档流，清除浮动（局限性）；兼容性好（优点）

<!--浮动布局-->
<section class="layout float">
	<style media="screen">
		.layout.float .left{
			float: left;
			width: 300px;
			background-color: red;
		}
		.layout.float .right{
			float: right;
			width: 300px;
			background-color: blue;
		}
		.layout.float .center{
			background-color: yellow;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center">
			<h2>浮动解决方案</h2>
	          1.这是三栏布局的解决方案；
	          2.这是三栏布局的解决方案；
	          3.这是三栏布局的解决方案；
	          4.这是三栏布局的解决方案；
	          5.这是三栏布局的解决方案；
	          6.这是三栏布局的解决方案；
		</div>
	</article>
</section>

绝对定位布局

快捷（优点）；可使用性差

<!--绝对定位布局-->
<section class="layout absolute">
	<style media="screen">
		.layout.absolute .left-center-right>div{
			position: absolute;
		}
		.layout.absolute .left{
			left: 0;
			width: 300px;
			background-color: red;					
		}
		.layout.absolute .right{
			right: 0;
			width: 300px;
			background-color: blue;
		}
		.layout.absolute .center{
			left: 300px;
			right: 300px;
			background-color: yellow;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center">
			<h2>绝对定位解决方案</h2>
	          1.这是三栏布局的解决方案；
	          2.这是三栏布局的解决方案；
	          3.这是三栏布局的解决方案；
	          4.这是三栏布局的解决方案；
	          5.这是三栏布局的解决方案；
	          6.这是三栏布局的解决方案；
		</div>
	</article>
</section>

flexbox弹性布局

解决以上两个布局的缺陷
Flex 布局教程：语法篇 -----阮一峰

<!--Flexbox布局-->
<section class="layout flexbox">
	<style media="screen">
		.layout.flexbox{
			margin-top: 140px;
		}
		.layout.flexbox .left-center-right{
			display: flex;
		}
		.layout.flexbox .left{
			width: 300px;
			background-color: red;		
		}
		.layout.flexbox .right{
			width: 300px;
			background-color: blue;
		}
		.layout.flexbox .center{
			flex: 1;
			background-color: yellow;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			<h2>flexbox解决方案</h2>
	          1.这是三栏布局的解决方案；
	          2.这是三栏布局的解决方案；
	          3.这是三栏布局的解决方案；
	          4.这是三栏布局的解决方案；
	          5.这是三栏布局的解决方案；
	          6.这是三栏布局的解决方案；
		</div>
		<div class="right"></div>
	</article>
</section>

table表格布局

兼容性好

<!--表格布局-->
<section class="layout table">
	<style media="screen">
		.layout.table .left-center-right{
			height: 100px;
			display: table;
		}
		.layout.table .left{
			width: 300px;
			display: table-cell;
			background-color: red;		
		}
		.layout.table .right{
			width: 300px;
			display: table-cell;
			background-color: blue;
		}
		.layout.table .center{
			display: table-cell;
			background-color: yellow;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			<h2>表格布局解决方案</h2>
	          1.这是三栏布局的解决方案；
	          2.这是三栏布局的解决方案；
	          3.这是三栏布局的解决方案；
	          4.这是三栏布局的解决方案；
	          5.这是三栏布局的解决方案；
	          6.这是三栏布局的解决方案；
		</div>
		<div class="right"></div>
	</article>
</section>

grid网格布局

CSS Grid 网格布局教程-----阮一峰

<!--网格布局-->
<section class="layout grid">
	<style media="screen">
		.layout.grid .left-center-right{
			width: 100%;
			display: grid;
			grid-template-columns: 300px auto 300px;
			grid-template-rows: 100px;
		}
		.layout.grid .left{
			background-color: red;		
		}
		.layout.grid .right{
			background-color: blue;
		}
		.layout.grid .center{
			background-color: yellow;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			<h2>网格布局解决方案</h2>
	          1.这是三栏布局的解决方案；
	          2.这是三栏布局的解决方案；
	          3.这是三栏布局的解决方案；
	          4.这是三栏布局的解决方案；
	          5.这是三栏布局的解决方案；
	          6.这是三栏布局的解决方案；
		</div>
		<div class="right"></div>
	</article>
</section>

预览效果

加上高度后只有flexbox布局和table布局适用（本文纯属个人学习笔记）