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

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

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

五种解决方式代码

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

 源代码
```
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layouttitle>
<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>



<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>


<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
```
展示效果

 知识拓展

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

1、各自的优缺点

① 对于浮动：
优点：
兼容性比较好，把清除浮动和其它浮动周边元素的关系处理好的话，那么它的兼容性是挺不错的。
缺点：
设置浮动之后，脱离了文档流，处理不好的话，会带来很多问题，这是它本身的局限性。
② 对于绝对定位：
优点：
快捷，不容易出问题
缺点：
本身脱离了文档流，就会导致子元素跟着脱离文档流。因此，导致绝对定位的有效性、可使用性比较差。
③ 对于flexbox
css3中推出的flex布局，就是为了解决上述两种方式不足而出现的，算是比较完美的一种方式，尤其是对于移动端。
④ 对于表格布局
优点：
尽管多数人吐槽表格布局，但其实，表格布局在很多场景都适用的。比如上文写的三栏布局设计当中，表格布局是不是很轻松就实现了呢？
同时，表格布局的兼容性是非常好的，当用 flex 解决不了问题的时候，对于PC端 IE8 是不支持 flex 的，此时就可以尝试表格布局。
缺点：
除开历史上一些诟病外，还有一个：
比如我们把三栏理解成为三个小单元格，那么当其中某一个单元格高度超出的时候，其余两侧也会跟着调整，于是对于有些场景是不合适的。因此，对于不同场景，我们可以在 flex 和表格布局进行选优操作
⑤ 对于网格布局
这一块的话，算是新热点，也是经历了一段时间的演变，从上文代码来看的话，通过网格布局我们能让代码更加简单、方便实现逻辑。在面试的时候提到也可以说明你比较关注新的事物，主动学习能力不错。
当然，以上表述有部分个人思考，也有现常说的优缺点，大家可以根据研究布局方式进行深入思考，学习更多的使用场景以及优缺点，其次，欢迎提出新的解决方案及相关知识点，后续进行补充。
相关阅读:
【Java SE】抽象类和接口
 全网最全Java微服务面试题总结（SpringCloud+Spring Boot）
字符串 | 字符串匹配 | KMP算法 | leecode刷题笔记
 .NET周刊【9月第2期 2023-09-10】
kafka生产者源码精华总结
 windows10安装redis服务【成功安装】
升压芯片很简单(三)，FSB628升压芯片大串讲
 实时音视频方案汇总
 SpringBoot - @ControllerAdvice注解详解
 24考研王道408数据结构-第三章“栈、队列、数组”课后算法题(P70--栈的模拟)
原文地址：https://blog.csdn.net/weixin_45822171/article/details/132760902

题目

五种解决方式代码

源代码

展示效果

知识拓展

1、各自的优缺点