双飞翼布局和圣杯布局的小例子

​

 今天逛知乎日常搜索了几个关于前端面试的问题，本以为学了react之类的框架就可以放弃css，现在想想自己真是太天真了。老前辈们说过：“Css你可以不把每一个属性全都记住，但是你一定要在你需要的时候知道去哪里找。”不过这句话有迷惑性，我再来改一下，常见的属性你一定要记住，不常见，不经常使用的你需要记住有这个属性，在你看到这个属性的时候，你要知道你见过，不要一头雾水一脸懵逼。

圣杯布局有好几种方法实现，它并不是只有一种固定格式.

最常见的圣杯布局MDN官方文档，基本上就是圣杯布局的大概思路.

页面nav占据最大的宽度，然后两边固定宽度，中间内容可以根据用户使用自动缩放。

​

1.flex 实现

​

如果要用flex实现的话 需要把

和footer拿出来，给中间三个内容一个单独的父容器，给父容器一个display:flex (或许有更好的方法不用分离，但是目前我只想到了分离出来nav和footer)​

 ​

 我们要求的大概思路就是，nav和footer占据用户屏幕的百分百宽度，中间内容分为三列，脑子里一定要有一个清晰的网页轮廓。

​​ 

给左右两边定宽，然后给中间内容一个flex：1,这里左右两边的宽度也可以用flex-basis表示,这里需要理解的点上flex:1这个地方，flex：number （代表着这个元素可以如何分配剩下的空间，因为左右默认值为0,我单独给center设置了1，那么代表着center将独自享有剩下的所有空间，那么就实现了我们想要的效果。）要注意的是flex：1是flex的简写模式，它的简写值可以有三个，在这里就不过多赘述.自行查阅mdn。

​

2.负margin 加浮动(这个太经典了，建议熟读百遍)

 ​

同样是这样的布局模式;

​

​ 通过上面简单的样式布局，呈现出页面效果如下（左右两边的空白是content的padding，准备放入left和right 的div的，通常情况padding的值就是左右两边sider的宽度，一般是固定宽度,你也可以设置margin来等效替换padding，得到的布局效果是一样的）

 这时候我们需要用到浮动来将我们的左右元素移动到相应的位置，​

这里为什么要margin-100%呢？你可以想象本来这三个元素应该是在同一行的，但是由于center盒子宽度满了，强行把left和right挤到下一行了，但是其实他们应该排在center盒子的最右边，因为div盒子是center left right这个上下文顺序在html文档里写，\
我们给左边盒子一个-margin，注意margin是相对于父亲元素来说的，我的-100%，也就是紧挨着父亲元素的最左边，此时left盒子和center盒子的左边重合。这时候我需要左边盒子再往左移动300px，也就是父亲盒子为它空出去的宽度。​

!!!!注意float是沿容器，容器，容器，并没有脱离父元素的限制!!!

（到这你应该也就知道下一步要干什么了，对，我们要让他脱离父亲元素的限制）

ok，第一时间就应该想到使用position这个方法，那么positon的relative是最合适的，（如果你想达成用户滑动屏幕，左右栏固定的效果也可以用absolute。absolute的定位方式会去找上一层非static模式的盒子，一直找到浏览器窗口为止。）那么该右边盒子紧挨着center了(一定要注意这里的意思，本来右边盒子也是和center盒子紧挨着在同一行的）这时候给了一个负的自身的宽度，那么他就会向左边移动，覆盖住center200px也就是自身宽度的值 ，但是这时候它还是没有摆脱父元素的限制，所以也要用定位，让他向右偏移自身宽度的长度

​

​

最终全部css代码和结果如下

​

​

3.双飞翼布局(广购平台页面经典布局)

​

 

圣杯布局和双飞翼布局实现的样式是大致基本相同的，只不过双飞翼布局的内容区用单独的div包裹，让这个div来承担浮动的角色。

​

​