前端面试必问之三栏布局及延伸问题
前言
简单对前端面试分析
对于面试咱们常常会要经历三面、四面或者更多，那这些面试都问啥呢？咱们在面试前是否能够准备些什么？css
- 一般一面/二面是对咱们的前端知识基础性问题的考察；
- 二面/三面是对咱们前端知识的深度和广度的考察；
- 三面/四面是对咱们业务、项目的考察（尤为是针对社招人员）；
- 终极面试通常是人力资源的面试。
ps：固然咱们在面试前呢，我须要最好是针对JD描述分析（不论是内推仍是招聘网站，咱们最好先看看公司的JD，即岗位职责和任职职责分析如，技术栈需求、业务需求）作到有的放矢（准备相应的技术栈、相应业务知识了解），在到简历中体现（毕竟面试官对咱们是不了解的，他们是针对咱们的简历和咱们在面试过程当中沟通在问咱们问题，这里咱们能够引导面试官问一些咱们准备好的一些技术问题了）html
咱们要传达面试官的能力素质和个性品质：前端
一、技术能力达标，可以完成团队的平常工做vue
（即便当咱们的技术跟公司的技术栈不匹配时，好比公司使用技术栈react，而咱们只会vue，那就没戏了吗？首先你要诚实回答，并谦虚的表达你的从新学习能力的心态，甚至能够适当的请教面试官一些问题，这都是面试官乐见的）html5
二、让人愿意与之相处react
（咱们在回答的问题时，要简洁，毕竟每个面试都是时间有限；体现本身的团队协做能力；当以为面试官问你的问题很简单的时候，也不要太自满，以为面试官不如你，挑衅什么的）css3
三、会在公司呆好久git
必定要重视基础和原理，要事先准备，要从自身的实际经历出发github
问题：三栏布局
题目
假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应面试
在看正式答案以前，但愿你们能够先思考下这个问题的答案。你可否答出来，且可否在笔试中手写出来，写出来你能够写几种答案？具体答案看正式部分哦~
思考：
其实关于这个问题，网上已经有不少的答案，可是面试官仍是会常常会问这个问题？
- 面试官要考察什么？
- 这个问题的延伸问题有哪些？
- 我答几种答案才算及格？（有的会说让最少写三种。）
、、、、、、、、、、、、、、、
一、对前端css基础的掌握
二、有没有对新知识了解
三、有没有深刻挖掘问题的能力、沟通理解能力
、、、、、、、、、、、、、、
正式
五种经典答案
这里说的五种答案（浮动布局、绝对布局、flexbox、表格布局、网格布局），并非说只有五种答案，好比咱们也可使用 calc计算函数来解决 ，且随着技术发展也可能还有其余的答案。只是目前这五种比较具备表明性。
1.浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>
<body>
<!-- 浮动布局解决方案 开始-->
<section class="layout float">
<style> .layout.float .left{ float:left; } .layout.float .right{ float:right; } </style>
<article class="left-center-right">
<div class="left">左边部分</div>
<div class="right">右边部分</div>
<div class="center">中间部分</div>
</article>
</section>
<!-- 浮动布局解决方案 结束-->
</body>
</html>
复制代码
ps：注意：
<div class="left">左边部分</div>
<div class="right">右边部分</div>
<div class="center">中间部分</div>
复制代码
class为center的布局在最后；
2.绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>
<body>
<!-- 绝对定位解决方案 开始-->
<section class="layout absolute">
<style> .layout.absolute .left-center-right>div { position: absolute; } .layout.absolute .left { left: 0; } .layout.absolute .center { left: 300px; right:300px; } .layout.absolute .right { right: 0; } </style>
<article class="left-center-right">
<div class="left">左边部分</div>
<div class="center">中间部分</div>
<div class="right">右边部分</div>
</article>
</section>
<!-- 绝对定位局部解决方案 结束-->
</body>
</html>
复制代码
3.flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>
<body>
<!-- flexbox解决方案 开始-->
<section class="layout flexbox">
<style> .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .center { flex: 1 } </style>
<article class="left-center-right">
<div class="left">左边部分</div>
<div class="center">中间部分</div>
<div class="right">右边部分</div>
</article>
</section>
<!-- flexbox解决方案 结束-->
</body>
</html>
复制代码
4.表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>
<body>
<!-- 表格布局解决方案 开始-->
<section class="layout table">
<style> .layout.table .left-center-right { display: table; width:100% } .layout.table .left-center-right>div { display: table-cell; } </style>
<article class="left-center-right">
<div class="left">左边部分</div>
<div class="center">中间部分</div>
<div class="right">右边部分</div>
</article>
</section>
<!-- 表格布局解决方案 结束-->
</body>
</html>
复制代码
5.网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; } .layout article div { height: 100px; } .layout .left,.layout .right{ width:300px; } .layout .left{ background:red; } .layout .center{ background: green; } .layout .right{ background: yellow; } </style>
</head>
<body>
<!-- 网格布局解决方案 开始-->
<section class="layout grid">
<style> .layout.grid .left-center-right { display: grid; width: 100%; grid-template-columns: 300px auto 300px; } </style>
<article class="left-center-right">
<div class="left">左边部分</div>
<div class="center">中间部分</div>
<div class="right">右边部分</div>
</article>
</section>
<!-- 网格布局解决方案 结束-->
</body>
</html>
复制代码
延伸
五种布局各自的优缺点
| 优势 | 缺点 | |
|---|---|---|
| 浮动布局 | 比较简单，兼容性好 | 浮动元素脱离文档流，要作清除浮动，这个处理很差的话，会带来不少问题，好比父容器高度塌陷等 |
| 绝对定位布局 | 快捷，设置很方便，并且也不容易出问题 | 容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就致使了这种方法的有效性和可以使用性是比较差的。 |
| flexbox | css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox. | IE10开始支持，可是IE10的是-ms形式的 |
| 表格布局 | 兼容性很好，在flex布局不兼容的时候，能够尝试表格布局。当内容溢出时会自动撑开父元素。 | 没法设置栏边距；对seo不友好；当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一块儿变高的，然而有时候这并非咱们想要的效果。 |
| 网格布局 | CSS新标准，建立网格布局最强大和最简单的工具，能够将页面分红具备简单属性的行和列 | 兼容性很差。IE10+上支持，并且也仅支持部分属性 |
若是把高度已知这一条件去掉，五种布局会有什么变化？
一、浮动布局
二、绝对定位布局
三、flexbox
四、表格布局
五、网格布局
从上边五种布局的页面效果能够看出，浮动和绝对定位布局须要考虑高度的设定。表格、flexbox、网格没有设置高度时，根据内容高度呈现，且三栏高度统一 。
五种方案，你若是选择实际项目中应用会优先选择哪一种？
没有一种一劳永逸的方法解决三列布局的问题，咱们经过上边的五种答案的优缺点就能够看出。经过分析五种布局各自的优缺点，了解这些优缺点及适用场景，从而在不一样的应用场景中选择相应的布局方式。
好比你的项目时h5的，也须要适用移动端那明显flexbox就比较适用。
flex布局是比较适合一维布局， Grid 布局则是将容器划分红"行"和"列"，产生单元格，而后指定"项目所在"的单元格，能够看做是二维布局。Grid 布局远比 Flex 布局强大。 可是须要考虑到grid的兼容性。
CSS3的calc函数
在前面小编有说过使用css3的calc函数也能够解决这三栏布局的问题，具体以下：
<!-- calc解决方案 开始-->
<section class="layout calc">
<style> .layout.calc .left-center-right { width: 100%; } .layout.calc .left-center-right>div{ float:left; } .layout.calc .center { width: calc(100% - 600px); } </style>
<article class="left-center-right">
<div class="left">左边部分</div>
<div class="center">中间部分</div>
<div class="right">右边部分</div>
</article>
</section>
<!-- calc解决方案 结束-->
复制代码
使用用法：calc(表达式)
calc() 的使用注意点： 运算符先后都须要保留一个空格，例如：width: calc(100% - 400px)； 任何长度值均可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；
兼容性：
总结：
具体代码可查看：github.com/lixiaoyanle…
面试问题考察了哪些问题
1）是否使用html5语义化：section、artcle等熟练使用； 2）页面布局理解深入； 3）css基础知识； 4）代码书写规范、（类名的命名） 5）是否了解新知识
其余相关名词解释
圣杯布局和双飞翼布局是什么？
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯模型</title>
<style> html * { padding: 0; margin: 0; } #bd{ padding:0 200px; } #bd>div{ float:left; height:100px; position: relative; } #center{ background: green; width:100%; } #left{ background:red; width: 200px; margin-left:-100%; right:200px; } #right{ background:yellow; width: 200px; margin-right:-200px; } </style>
</head>
<body>
<section>
<article id="bd">
<div id="center">中间部分</div>
<div id="left">左侧部分</div>
<div id="right">右侧部分</div>
</article>
</section>
</body>
</html>
复制代码
双飞翼布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style> html * { padding: 0; margin: 0; } #bd>div { float: left; height: 100px; } #center { width: 100%; } /*给inside的div添加margin，把内容放到中间栏，其实整个背景仍是100%*/ #inside{ background: green; margin:0 200px; height: 100px; } #left { background: red; width: 200px; margin-left: -100%; } #right { background: yellow; width: 200px; margin-left: -200px; } </style>
</head>
<body>
<section>
<article id="bd">
<div id="center">
<div id="inside">中间部分</div>
</div>
<div id="left">左侧部分</div>
<div id="right">右侧部分</div>
</article>
</section>
</body>
</html>
复制代码
圣杯布局、双飞翼布局相同和不一样点：
| 相同点 | 不一样点 | |
|---|---|---|
| 圣杯布局 | 一、解决的问题是同样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染；二、三栏所有float浮动，左右两栏加上负margin让其跟中间栏div并排，以造成三栏布局 | 为了中间div内容不被遮挡，将三栏布局的父级设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div |
| 双飞翼布局 | 同上 | 为了中间div内容不被遮挡，直接在中间div内部建立子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。 |
圣杯布局、双飞翼布局优缺点：
| 优势 | 缺点 | |
|---|---|---|
| 圣杯布局 | 结构简单，不须要添加多余dom节点 | 若是将浏览器无线放大时，「圣杯」将会「破碎」掉。如：当中间部分的宽小于左侧部分时就会发生布局混乱。 |
| 双飞翼布局 | 不会像圣杯布局那样变形、通用性强 | 多加了一层dom节点 |
圣杯布局与双飞翼布局的优势：利用布局，可优先渲染主要部分