从一道题看面试中的页面布局
从一道题看页面布局面试会考什么
从一道题看页面布局。
先介绍下自己,目前还是一名在校大学生,前端菜鸟一枚。目前正在准备春招,所以也做了很多的准备。当然在准备的过程中,我们要举一反三,从一道题中延伸出更多的知识点,不断完善我们的知识体系。今天我们以一道题来看看页面布局能延伸出哪些知识,欢迎和我一起在准备春招的同学来一起学习,也欢迎各位大佬前来鞭策。
来看一道题目:假定三栏布局的高度已知,其中左右栏的宽度分别时300px,中间宽度自适应,请写出布局方式。
首先假定我们现在正在面试,大家先想一想这道题目可以有几种解决方案?
在脑海中首先想到的解决方案应该是:浮动布局和应用绝对定位的方式去解决。那么这两种解决方案就可以令面试官满意了么?我认为这两种基本的方法可能连及格线都不够。那么还有那些布局方式呢?做过移动端开发的应该都知道flex布局,如果有关注过比较新一点的技术那么就应该知道grid布局,还有一种比较老的布局方式就是table布局。
那么知道这些解决方案就够了么?当然不是,你还要了解这道题有那些延伸,延伸的问题在后续会列出一些!好,废话不说了,我们先看下这几种解决方案。
1.浮动布局:
在进行回答时,首先我们应该注意到几点注意事项:HTML语义化,代码的规范化,CSSreset等等。
<section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动的解决方案</h1> <p>这是布局的中间部分</p> </div> </artcle> </section> <style> .layout article div{ min-height: 100px; } .layout.float .left{ float: left; width: 300px; background-color: red; } .layout.float .right{ float: right; width: 300px; background-color: yellow; } .layout.float .center{ background-color: blue; } </style>
这种布局方式很简单,但是存在一些潜在的问题,这些问题我会在后续一一列出。
2.绝对定位布局
这个布局方式的关键一点就是中间部分距离左侧300右侧300,就达到了自适应的要求。
<section class="layout absolute"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>绝对定位解决方案</h1> <p>这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section> <style> .layout article div{ min-height: 100px; } .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ left: 0; width: 300px; background-color: red; } .layout.absolute .center{ left: 300px; right: 300px; background-color: blue; } .layout.absolute .right{ right: 0; width: 300px; background-color: yellow; } </style>
3.flex布局
那么我们来看看目前比较常用的flex布局。如果我们不考虑对IE的兼容性,我认为flex布局方式是一种非常好的布局。有关flex布局的基础知识大家可以看阮一峰老师的文章.
<section class="layout flex"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flex布局解决方案</h1> <p>这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section> <style> .layout.flex .left-center-right{ display: flex; //在容器元素声明使用flex布局 } .layout.flex .left{ width: 300px; background-color: red; } .layout.flex .center{ flex: 1; //中间自适应 background-color: blue; } .layout.flex .right{ width: 300px; background-color: yellow; } </style>
4.grid(栅格化)布局
这种布局方式是一种比较新的布局方式,代码量大大减少,而且现在已经纳入了CSS草案中。如果大家对这方面的知识不了解的话可以看下我写的一个小例子,也可以自行查阅资料。
<section class="layout grid"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>栅格化定位解决方案</h1> <p>这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section> <style> .layout.grid .left-center-right{ display: grid; //声明为grid布局 width: 100%; grid-template-rows: 100px; //高度设置成100px grid-template-columns: 300px auto 300px; //宽度分别设置300px auto 300px } .layout.grid .left{ background-color: red; } .layout.grid .center{ background-color: blue; } .layout.grid .right{ background-color: yellow; } </style>
5.表单/格布局
表单布局是一种比较老的布局方式,现在已经很少有人用了,但是也是一种解决方案,尤其在针对有兼容性的特殊要求时,表格布局就是一种非常好的选择。
<section class="layout table"> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>表单定位解决方案</h1> <p>这是三栏布局的中间部分</p> </div> <div class="right"></div> </article> </section> <style> .layout.table .left-center-right{ width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div{ display: table-cell; } .layout.table .left{ width: 300px; background-color: red; } .layout.table .center{ background-color: blue; } .layout.table .right{ width: 300px; background-color: yellow; } </style>
代码写完了,我们就来看看最后的效果吧。
重点来了:
作为这道题来说,那么这5种解决方案列出来了就完事了么?当然不是,那我们来看看以这道题为例看看问题怎么延伸。
- 5种方案各自有什么优缺点?(比如第一种方式会出现浮动引起的外溢,绝对定位会造成后续的元素的位置问题,flex布局的兼容性......)
- 如果高度是未知的,那么几种方案那个还可以使用?
- 这几种方案的兼容性如何,在PC端和移动端分别使用那种布局方式?
- 浮动问题中清除浮动的情况,延伸出BFC等等等等?
针对上述问题大家可以自己思考,来看看关于页面布局的知识体系是否完善。
这种题还有很多变种:
- 上下高度固定,中间自适应(移动端常见)
- 左侧定宽右侧自适应。
- 右侧定宽左侧自适应。
- 上部定宽下部自适应。
- 下部定宽上部自适应。
以上题目大家可以自己手动去尝试下。
今天就到这儿吧,如果本文对大家(尤其是和我一样正在准备面试的同学们)有帮助的话欢迎大家给我的Github点赞。祝大家新年快乐^_^
转载请注明出处~