面试必考点：前端布局知识

1、面试必考点：前端布局知识前言 这里所要介绍的布局学问主要是在解决三列布局模式而浮现的几种布局解法，其中包含了经典的圣杯布局，双飞翼布局，肯定定位的布局方式，还包含2009年w3c所提出的flex布局方式和以css3所带来的calc计算函数来解决三列布局的方式。 本文会通过实例的方式讲解，带你了解为什么没有一种一劳永逸的办法解决三列布局的问题，看看分离在用法这些方式时分离都碰到了哪些的问题，通过分析解决，让你明了这几种方式的各自的优缺点与适用场景。 一、三列布局是什么 指共有三列，但是左右两列是宽度固定，中间一列宽度按照屏幕宽度自适应的布局方式，这是一种比较频繁的布局方式，无数网站首页均采纳这种

2、方式布局，比如像下面比较认识的菜鸟教程官网。 二、三列布局解决办法 我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月收拾了一份最适合2019年学习的web前端学习干货，各种框架都有收拾，送给每一位前端小伙伴，想要猎取的可以关注我并在后台私信我：前端，即可免费猎取。 1. 圣杯布局 圣杯布局，一个经典的三列布局解决办法，至于为什么 叫这个名字，我理解是布局完成后像个圣杯，接下来一步一步实现一下圣杯布局。 完成基础效果 . 将左侧栏，右侧栏移到与内容栏同样高度，这里先利用float浮动元素。 注重浮动完成之后，footer元素被盖在内容

3、块下面了。 . 利用margin-left的负值将左侧栏，右侧栏和内容栏移到同一高度。将左侧栏margin-left赋值为-100%；然后将右侧栏margin-left赋值为负的自身宽度。 注重：这里的左右侧栏都是附在内容栏上的，内容栏被压在下面。 . 将底部footer区域利用clear属性清除content内的浮动元素透出来。 . 将内容栏被左右压在底下的部分，通过content添加padding属性透出来。 .content padding: 0 200px; 这个时候真囫囵 content的内容都被padding缩放了，怎么办呢？ . 左右侧边栏利用position: relative

4、，移出内容区域。 囫囵布局就完成了，你可以左右拉伸屏幕，内容区域为自动缩放，符合咱们 开头时的需求。 圣杯布局的问题：当缩放到一定程度，会发觉囫囵页面结构将会变乱。 固然利用min-width可以解决这个问题，由于min-width是后续css3中所浮现的内容，在当初min-width还没有的状况下，圣杯布局就存在这个问题。然而这个问题可以解决吗？接下来进入双飞翼布局。 2. 圣杯双飞翼布局 双飞翼布局是圣杯布局演变而来的，且是旨在要解决圣杯布局所碰到的问题，即缩小到一定程度后页面布局依然正常，由于代码和圣杯基本全都，只是结构略有差异，这里不一步一步拆解。 从上面的dom结构来看，双飞翼布局与

5、圣杯布局最大的不同点便是在此，双飞翼布局中，将中间栏放在一个div内部小包起来了，多了一层dom结构。 下面看看样式。 从上面双飞翼的布局来看，css中没有了position定位布局的内容了，感觉简明而清楚了。 双飞翼布局的问题：相比于圣杯布局多了一层dom结构，导致页面渲染性能下降。 3. 肯定定位布局 假如作为一个初学者，让我解决这个问题，我一定会挑选肯定定位布局，由于肯定定位布局是最容易最简单理解的一种三列布局解决方式。 思路十分容易，列为以下几步。 . 将内容区域给margin值，居中且留出左右侧边栏的宽度。 . 将外层content添加position:relative属性。 . 将

6、左右侧边栏设置肯定定位属性，position: absoluate，举行布局在与内容栏同高的位置。 . 分离设置left:0与right:0 属性，保持内容块与左右侧栏有挨次且不重合罗列。 css相关内容也十分简单理解，基本都是常用的定位相关内容。 上面的布局代码虽然十分简单理解，但是它却有一个致命的问题。 定位布局的问题：由于左右侧的高度是肯定定位脱离文档流的，此时footer区域只会在内容区块下，而不是由内容块和左右侧栏三块区域的高度而打算，所以在某些场景下是不能满足需求的，如展现出下面的效果。 4. flex布局 flex布局是2009年w3c所提出的一种新的布局方式，在目前是十分好用且

7、频繁的布局方式，我感觉能解决页面上百分之90的布局问题，但是由于出来的比较晚，会有部分扫瞄器兼容性的问题。 代码彻低是简约而又大方，而且没有上面三种布局所产生的问题，真是三列布局必备良品。 flex布局的问题：唯一能说的问题就是兼容性问题了。 flex布局解决三栏布局无疑肯定是最便利的，假如现在我碰到三列布局的问题，毋庸置疑我会挑选flex布局来解决，尽管有一些低版本扫瞄器的兼容性，9012年的今日请放心用法。 5. css3的calc函数 思路十分简单理解，就是中间三块区域加float浮动起来，从左到右依次按挨次罗列，由于左右两侧宽度已知，而中间块宽度需要自适应，所以只要在屏幕宽度变幻的时候

8、，通过css3的办法实时计算出中间内容块自适应的宽度即可，十分符合人们的思维习惯。 calc是css3支持的css计算函数，它能动态的计算出一个值，打破传统css概念，让你的css也能做计算。 用法使用：calc(表达式) calc() 的用法注重点： 运算符前后都需要保留一个空格，例如：width: calc(100% - 400px)； 任何长度值都可以用法calc()函数举行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数用法标准的数学运算优先级规章； css3计算属性布局的问题：也是兼容性问题了，从下面可以看出来无数扫瞄器还是不支持的。 三、总结 上面就是经典的三列布局相关的学问，虽然圣杯布局和双飞翼布局在现在很少被用到，但是作为一个前端开发者，还是要了解这些经典的布局相关学问，从而在面试浮现的时候能够从容应对。 事实上，在9012年的今日，其实在目前开发中百分之九十的布局都是可以通过flex布局来解决的，只要你没有ie低