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

最新推荐文章于 2024-08-14 19:32:44 发布

tomorrownan

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量1.9k

点赞数 2

分类专栏：前端 JavaScript 文章标签：面试页面布局

本文链接：https://blog.csdn.net/w1418899532/article/details/95589135

版权

本文详细介绍了前端面试中常见的页面布局问题——三栏布局的五种解决方案，包括浮动布局、绝对定位、弹性布局、网格布局和表格布局，并分析了各种方案的优缺点。适合前端开发者复习面试知识点。

摘要由CSDN通过智能技术生成

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

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>

效果：

效果1

绝对定位方案

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