前端面试经典题--页面布局

这篇具有很好参考价值的文章主要介绍了前端面试经典题--页面布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

题目

假设高度已知,请写出三栏布局,其中左、右栏宽度各为300px,中间自适应。

五种解决方式代码

浮动解决方式
绝对定位解决方式
flexbox解决方式
表格布局
网格布局

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<style>
html *{
	padding: 0;
	margin: 0;
}
.layout{
	margin-top: 20px;
}
.layout article div{
	min-height: 100px;
}
</style>
</head>

<body>
<section class="layout">
	<article class="left-right-center">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</article>
</section>

<!-- 浮动解决方式 -->
<!-- 就浮动模式,HTML的写法是左右中,其他的都可以是左中右 -->
<style>
.layout .left{
	float: left;
	width: 300px;
	background: red;
}
.layout .right{
	float: right;
	width: 300px;
	background: blue;
}
.layout .center{
	background: yellow;
}
</style>

<!-- 绝对定位解决方式 -->
<style>
.layout .left-center-right>div{
	position: absolute;
}
.layout .left{
	left: 0;
	width: 300px;
	background: red;
}
.layout .center{
	left: 300px;
	right: 300px;
	background: yellow;
}
.layout .right{
	right: 0;
	width: 300px;
	background: blue;
}
</style>

<!-- flexbox解决方式 -->
<style>
.layout .left-center-right{
	display: flex;
}
.layout .left{
	width: 300px;
	background: red;
}
.layout .center{
	flex: 1;
	background: yellow;
}
.layout .right{
	width: 300px;
	background: blue;
}
</style>

<!-- 表格布局 -->
<style>
.layout .left-center-right{
	width: 100%;
	display: table;
	height: 100px;
}
.layout .left-center-right>div{
	display: table-cell;
}
.layout .left{
	width: 300px;
	background: red;
}
.layout .center{
	background: yellow;
}
.layout .right{
	width: 300px;
	background: blue;
}
</style>

<!-- 网格布局 -->
<style>
.layout .left-center-right{
	display: grid;
	width: 100%;
	grid-template-rows: 100px;
	grid-template-columns: 300px auto 300px;
}
.layout .left{
	background: red;
}
.layout .center{
	background: yellow;
}
.layout .right{
	background: blue;
}
</style>
</body>

展示效果

前端面试经典题--页面布局,CSS3,前端,javascript,开发语言,前端面试

知识拓展

上述5中解决方式是比较常⻅的,但是我们 不能只局限于为了问答而问答,我们应该从此基础上升华一下问题。
答完了这5种常⻅方式,并不代表我们⻚面布局这一话题就结束了,面试官可能还会延伸我们的问题,比如:
这5种布局方式各自有什么优点和缺点?
如果 高度已知 条件去掉,考虑纵向,那么对于中间内容过多,导致中间格子撑开,此时需要左右跟着撑开,以上5种方式哪几种还能使用?
这5中方式的兼容性如何?如果让你选择一种最优的去应用于业务,你会选择哪种方式?
那么,接下来就来围绕这三个问题来讲解:

1、各自的优缺点

① 对于浮动:
优点:
兼容性比较好,把清除浮动和其它浮动周边元素的关系处理好的话,那么它的兼容性是挺不错的。
缺点:
设置浮动之后,脱离了文档流,处理不好的话,会带来很多问题,这是它本身的局限性。
② 对于绝对定位:
优点:
快捷,不容易出问题
缺点:
本身脱离了文档流,就会导致子元素跟着脱离文档流。因此,导致绝对定位的 有效性 、 可使用性 比较差。
③ 对于flexbox
css3中推出的flex布局,就是为了解决上述两种方式不足而出现的,算是比较完美的一种方式,尤其是对于移动端。
④ 对于表格布局
优点:
尽管多数人吐槽表格布局,但其实,表格布局在很多场景都适用的。比如上文写的三栏布局设计当中,表格布局是不是很轻松就实现了呢?
同时,表格布局的兼容性是非常好的,当用 flex 解决不了问题的时候,对于PC端 IE8 是不支持 flex 的,此时就可以尝试表格布局。
缺点:
除开历史上一些诟病外,还有一个:
比如我们把三栏理解成为三个小单元格,那么当其中某一个单元格高度超出的时候,其余两侧也会跟着调整,于是对于有些场景是不合适的。因此,对于不同场景,我们可以在 flex 和 表格 布局进行选优操作
⑤ 对于网格布局
这一块的话,算是新热点,也是经历了一段时间的演变,从上文代码来看的话,通过网格布局我们能让代码更加简单、方便实现逻辑。在面试的时候提到也可以说明你比较关注新的事物,主动学习能力不错。
当然,以上表述有部分个人思考,也有现常说的优缺点,大家可以根据研究布局方式进行深入思考,学习更多的使用场景以及优缺点,其次,欢迎提出新的解决方案及相关知识点,后续进行补充。文章来源地址https://www.toymoban.com/news/detail-707100.html

到了这里,关于前端面试经典题--页面布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包